Hello,
Is anyone able to help me remove some of the announcement bar padding in mobile, so that I can fit my text on one line? Thank you.
URL: https://www.livwithin.com.au/
PW: pewpog
Topic summary
A user seeks help reducing announcement bar padding on mobile to fit text on a single line. The site is built on Shopify.
Two CSS solutions proposed:
-
Target page-width padding - Add media query (max-width: 749px) to remove padding from
.announcement-bar-section .page-widthusingpadding: 0 !important; -
Target message element directly - Add CSS to
base.cssfile targetingp.announcement-bar__message.h5withpadding: 0 !important;anddisplay: flex; align-items: center;
Both solutions use !important to override existing styles. The second solution includes a screenshot showing the expected result. The discussion remains open with no confirmation from the original poster on which approach worked.
1 Like
Hi @ellacoker
You can try to use this code and check again
@media (max-width: 749px) {
.announcement-bar-section .page-width {
padding: 0 !important;
}
}
Hi @ellacoker
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
p.announcement-bar__message.h5 {
padding: 0 !important;
display: flex;
align-items: center;
}
Result
Best,
DaisyVo