# Custom CSS

&#x20;To get more details on how to use the section, check the following help [<mark style="color:blue;">**page**</mark>](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css).

&#x20;If you need to add your custom CSS to a specific section on the page, check whether it includes the **“Custom CSS”** to implement changes individually for that template:

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2F021YRDo69SHsh0bejbLK%2Fcustom%20css.png?alt=media&#x26;token=9678597b-458f-421f-bbf6-f5857ea0740b" alt=""><figcaption></figcaption></figure>

&#x20;The theme provides the “Custom CSS” for both static and dynamic sections in the theme Editor.

### How to adjust the font size in the Announcement bar using CSS

You can change the font size in the Announcement bar by using the provided global section.

Here is an example of the code that can be placed in the input field to change the font size on the desktop:

```
@media only screen and (min-width: 750px) {
  .header__tape p {
    font-size: 16px;
  }
}
```

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FQR6DG8jkYSMKAVIqsvgj%2Fannouncement_desktop%20css.png?alt=media&#x26;token=0d26fac4-a8ab-4ecb-a6bf-026e007fcb56" alt=""><figcaption></figcaption></figure>

This is the part of the code that can be used for mobile:

```
@media only screen and (max-width: 390px) {
  .header__tape p {
    font-size: 24px;
  }
}
```

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FKldGA5geDTQbJPBTHvB7%2Fannouncement_mobile%20css.png?alt=media&#x26;token=6ca50db5-5274-4a5a-a0e6-8ef0f2b13c2d" alt=""><figcaption></figcaption></figure>

Replace the values with any other you wish.