Horizon Theme - Announcement in the Announcement Bar Height

Store Design
1

In the Horizon theme - Letters in the announcement in the Announcement Bar are being cut off at the bottom if a single line. The code needs to be changed from 1 to 1.5.

2

@sunshine9280 ,

Please share store URL, Will check and let you know the solution.

3

Hey @sunshine9280 Welcome to Shopify Community can you please share the Website URL

4

It would be good if you can share the link to your store.

5

Hey @sunshine9280

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

6

the announcement bar in Horizon has a pretty tight default line-height which can clip descenders on certain fonts. add this to your theme’s CSS (Online Store > Themes > Edit Code > assets/base.css, or drop it in the Additional CSS box in the customizer):

.announcement-bar__message {
  line-height: 1.5;
}

if that selector doesn’t match exactly in your version, inspect the announcement bar text element and target whatever class wraps the text directly. the principle is the same.

7

Thanks for everyone’s help. I did change the announcement to 1.5 and that fixed it. Unfortunately because of an issue with the hero image resizing I’ve had to change to another theme.

8

Hi @sunshine9280

You can correct this by changing the line-height in your theme’s CSS. Find the announcement bar styles in theme.css or base.css and adjust the line height for the announcement text from 1 to 1.5. This guarantees that single-line messages are never accidentally cut off letters which also enhances readability on all devices.