Make announcement bar more narrow (codes aren't working)

[LightStyl]

Hi all, I've been trying to reduce the size of the announcement bar on our website (www.plumeskin.com) and for whatever reason all the codes I find on here don't seem to be working when pasted after /body in the theme liquid.

Trying to basically reduce the space between the top and bottom of text by 30% or so. An example of a code I've tried is:

<style>

     .announcement-bar__message {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
       }

</style>

Any advice on what to do or why that might not be working would be greatly appreciated. Using the Sense theme.

[kevinkarma55]

Hi,

It is because you set the height to botton which is not allow you to reduce height of the bar, make change to following height and you should be good:

[DaisyVo · Accepted solution]

Hi @LightStyl 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

div.shopify-section.shopify-section-group-header-group.announcement-bar-section {
    height: 24px !important;
}
p.announcement-bar__message.h5 {
    padding: 0 !important;
}
.announcement-bar .slider-button {
    height: 20px !important;
}

Here is the result: https://prnt.sc/4IIqWmKgtkNP

I hope this helps

Best,

Daisy