Code to change the Annoucement bar length

Store Design
1

I’m hoping someone can help me. Our Announcement bar spreads over 3 lines instead of stretching out over the restraints of my page. I would love to know what code to use to stretch this out so more characters are on the one line…. Thank you in advance

2

@info_9359 can you share a link to your store?

3

www.gccomm.com.au is our website

4

@info_9359 from the Shopify Admin click on Customize in your theme and select the Announcement Bar. From there look for Custom CSS and add the following snippet

@media (min-width: 990px){
   .utility-bar__grid {
       display: flex;
       align-items: center;
   }
   
   .list-social {
      flex-shrink: 0;
   }

   .announcement-bar {
       width: 95%;
   }
}
5

Thank you so much. Have a wonderful Christmas!

6

Hi,

Hope this will help

To keep your announcement text on one line add the following to your theme’s base.css (or theme.css)

CSS example

.announcement-bar__message {
  white-space: nowrap;
}

.announcement-bar {
  max-width: 100% !important;
}