How to shrink announcement bar and text (Ride 10.0.0)

Store Design
,
1

I want to make the size of the announcement bar shorter and also make the text smaller. Thanks for your help in advance.

Url: https://f01520-2.myshopify.com/

Password: shisah

1 Like
2

@vasss

Please add the following CSS code to your assets/base.css bottom of the file.

.announcement-bar__message {
    padding: 0.5rem 0 !important;
    font-size: 1rem !important;
}

Thanks!

3

Hello @vasss ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file or theme.css file

To make the announcement bar shorter, adjust the height property. For example:

.announcement-bar {
  height: 40px; 
}

Note: Adjust the value to your desired height

To reduce the text size within the announcement bar, find the CSS selector for the announcement text. This selector could be .announcement-bar__message or something similar. It might look like this:

.announcement-bar__message {
  font-size: 14px;
}

Note: Adjust the value to your desired font size

Save and preview.

Hope this can help.

Transcy.

4

Hi, @vasss .

Follow these steps.

Go to the online store theme and go to base.css file paste the code mentiond below.

p.announcement-bar__message.h5 {
    font-size: 12px;
}

.announcement-bar {
    padding: 7px 0;
}

Result:

websensepro_0-1689144849593.png
websensepro_0-1689144849593.png1347×620 32.9 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!