How can I adjust the Turbo theme announcement bar size?

Shopify Discussion
1

I have a new free shipping announcement and the promo bar is a little too tall. When I don’t have the text in the announcement the bar is properly sized (maybe slightly large). Anyone know how to change the size of that? Also, while we’re at it? Is there anyway to make the annoucment bar/promo bar text wrap on a mobile? It cuts off on mobile.

567E20FF-5867-4EBE-9213-E3BF5FC53F53_1_201_a.jpeg
567E20FF-5867-4EBE-9213-E3BF5FC53F53_1_201_a.jpeg1706×965 121 KB

2

@Hi @tealadies ,

After checking your site, I see that there are 2 bars is the top-bar and promo-banner

HDLShin_0-1715477537407.png
HDLShin_0-1715477537407.png1919×878 195 KB

You can try to separate those two parts with the following code
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

HDLShin_1-1715477874684.png
HDLShin_1-1715477874684.png1902×899 133 KB

Step 2: Search file base.css, theme.css or styles.css

HDLShin_2-1715477930718.png
HDLShin_2-1715477930718.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

.top-bar {
 margin-top: 10px !important
}

Hope this can help you

Kind regards,
HDL-Shin

3

Thank you - that leaves a white space between the promo bar and the top bar so I need to figure out how to get rid of that. Any thoughts? Also - do you happen to have a suggestion for making that promo bar wrap on mobile?

4

I guess I can make the top bar white for now to make it look like there is no space between the two.

5

Hi @tealadies ,
Please delete the old code I just sent you, you can replace with this new code it will have the right color for you

.promo-banner {
    background-color: #f47d31d4 !important;
}

@media (max-width: 767px) {
  .promo-banner__content p {
     width: 100%;
  }
  .promo-banner .promo-banner__content {
     padding-left: 0 !important;
     padding-right: 24%;
  }
}

Result:

HDLShin_0-1715479501159.png
HDLShin_0-1715479501159.png1919×883 223 KB

Result mobile:

HDLShin_1-1715480028295.png
HDLShin_1-1715480028295.png636×645 137 KB

6

I can’t seem to get it to wrap on mobile even after making that change. I’ve tried private browsing and a new browser but I’m not seeing it wrap like your screenshot.

7

Hi @tealadies ,

Pls try again with this code

@media only screen and (max-width: 767px) {
  .promo-banner__content p {
     width: 100% !important;
  }
  .promo-banner .promo-banner__content {
     padding-left: 0 !important;
     padding-right: 24% !important;
  }
}
8

The promo-banner still isn’t wrapping on mobile. Thank you for your help with this - I really appreciate it.

9

Hi @tealadies ,
Let find this code in your file css and try insert my code inside it :

HDLShin_1-1715483307023.png
HDLShin_1-1715483307023.png1919×856 100 KB

.promo-banner__content p {
     width: 100% !important;
  }
  .promo-banner .promo-banner__content {
     padding-left: 0 !important;
     padding-right: 24% !important;
  }

Hope it work

10

no luck i’m afraid.