Announcement Bar Text is Getting cut off

Technical Q&A
1

Hi and thanks for helping me out. Some of my text in my announcement bar text letters “g” and “p” are getting cut off on the bottom. I tried to insert some code i found online but is not helping. I am using the Horizon Theme 3.2.1. I tried adjusting the padding and making the font size tiny but still the g and the p in shipping are getting cut off. The photo that i inserted shows how the g is cut off and its driving me crazy. Any help will do!

Thanks

Harry

Shipping

2

You need to increase the margin, not the padding. :wink:

3

How do i do that? :slight_smile:

I am new to this!

Thanks

Harry

4

I can look it up for you tomorrow - I’m on the train with my laptop right now, so it’s difficult to find it at the moment. I’m sure some people here will ask for your shop URL to solve the problem. Either one of them will provide you with the solution, or you can wait until I’m back in the office. :slight_smile:

5

this worked!

.announcement-bar {
padding: 5px 20px;
line-height: 1.5;
font-size: 13px;
}

6

Hi,

Hope this will help

Letters like g and p get cut off in Horizon because the announcement bar’s line-height is too small. Add CSS

CSS example

.announcement-bar__message,
.announcement-bar__text {
  line-height: 1.3 !important;
}
.announcement-bar {
  overflow: visible !important;
}