Announcement bar for mobile

Shopify Discussion

Topic summary

A user reports that their announcement bar appears too wide on mobile devices while displaying correctly on desktop.

Proposed Solutions:

Two developers provided CSS code fixes targeting mobile screens (max-width: 767px):

  • Solution 1: Add CSS to the base.css file to set announcement bar padding to 0
  • Solution 2: Insert CSS code in theme.liquid file before the closing tag, adjusting padding, line-height, and text size properties

Both solutions use media queries to specifically target mobile viewport widths. The issue remains unresolved as no confirmation of implementation or success has been posted.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi announcement bar for mobile version is too wide, desktop version seems okay.> > www.datlook.nl> > How could i make it narrower?

2

Add this css in your edit code > base.css file

@media screen and (max-width:767px){
  .section-annoucement-bar .announcement-bar {
    padding: 0;
  }
}
1 Like
3

Hello @saraseiva

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width:767px){ .announcement-bar { padding-top: unset !important; padding-bottom: unset !important; } .text-size-xs { line-height: 16px !important; } }

Tech_Coding_0-1729171712095.png
Tech_Coding_0-1729171712095.png308×259 45.3 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.