Hello,
Does somebody know how we can adjust our announcement bar? We want it smaller for desktop and mobile.
URL: https://excitarestudios.com/
Greetz,
Joa
Topic summary
A user seeks to reduce the size of their announcement bar for both desktop and mobile versions of their Shopify store.
Initial Solution Attempted:
- One responder suggested adding CSS code to the
base.cssfile targeting.page-width.utility-bar__gridclasses - This approach adjusts width and centers the bar using flexbox
- The original poster reported this solution did not work
Alternative Solution Provided:
- Another user offered different CSS code to add at the end of
base.css - This targets multiple selectors including
ul.list-unstyled.list-social, utility bar grid classes, andslideshow-component.announcement-bar - Sets a fixed height of 30px using
!importantflag - Includes a screenshot showing the expected result
Status: The discussion remains open with no confirmation whether the second solution resolved the issue.
1 Like
In order to make the announcement bar small then you need to paste the following code in the end of base.css file.
.page-width.utility-bar__grid.utility-bar__grid--3-col {
width: 65%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
You can adjust the width based on your requirements.
Does not work
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
ul.list-unstyled.list-social,
.page-width.utility-bar__grid.utility-bar__grid--3-col,
slideshow-component.announcement-bar {
height: 30px !important;
}
Result
Best,
DaisyVo