Ho to reduce font size in the header on mobile?

Store Design
, , , ,

Topic summary

Goal: Reduce the announcement bar text size on mobile so it doesn’t wrap onto two lines (Trade theme).

Clarification: The target is the announcement bar header. A screenshot was provided to illustrate the issue, and a code snippet is central to the solution.

Proposed fix: Edit theme code via Online Store → Themes → … → Edit Code, then open Assets/base.css and add responsive CSS.

  • Use CSS media queries to adjust the font size of .announcement-bar__message.h5 at specific viewport widths.
  • Suggested breakpoints and sizes (corrected version): max-width 309px → 7px, 335px → 8px, 361px → 9px, 386px → 10px, 412px → 11px, 427px → 12px.
  • The author notes it’s important to order media queries from smaller to larger max-widths (309 → 427), not the reverse.

Technical context: Media queries are CSS rules that apply only under certain screen widths, allowing smaller font sizes on narrower devices to prevent text wrapping.

Caveats: In the corrected snippet, one selector appears to have a typo (“a nnouncement-bar__message.h5”), which may need fixing. No confirmation yet from the requester that the change resolved the issue; discussion remains open.

Summarized with AI on December 24. AI used: gpt-5.
1

I would like to reduce the size of the header font on mobile because it splits up into 2 lines.

Thank you!

URL: https://suq5b8csct01fyzg-61270851797.shopifypreview.com/collections/rappid-test

Im using the Trade theme.

1 Like
2

Hi @KimGottwald

Which header your referring to?

3

I meant the announcement bar, sorry.

Bildschirmfoto 2024-07-12 um 10.55.45 PM.png
Bildschirmfoto 2024-07-12 um 10.55.45 PM.png3440×137 17 KB

4

Instructions

  1. Go to ‘Online Store’ → Theme

  2. At your Active theme click on 3 dots (…) → Edit Code

  3. In the Assets Folder locate the file ‘base.css’

  4. At the end of the file paste the below code

@media (max-width: 308px){
  .announcement-bar__message.h5{
     font-size: 7px;
  }
}
@media (max-width: 334px){
  .announcement-bar__message.h5{
     font-size: 8px;
  }
}
@media (max-width: 360px){
  .announcement-bar__message.h5{
     font-size: 9px;
  }
}
@media (max-width: 385px){
  .announcement-bar__message.h5{
     font-size: 10px;
  }
}
@media (max-width: 411px){
  .announcement-bar__message.h5{
     font-size: 11px; 
  }
}
@media (max-width: 426px){
  .announcement-bar__message.h5{
     font-size: 12px; 
  }
}
5

Corrected Version

@media (max-width: 309px){
  .announcement-bar__message.h5{
     font-size: 7px;
  }
}
@media (max-width: 335px){
  .announcement-bar__message.h5{
     font-size: 8px;
  }
}
@media (max-width: 361px){
  .announcement-bar__message.h5{
     font-size: 9px;
  }
}
@media (max-width: 386px){
  .announcement-bar__message.h5{
     font-size: 10px;
  }
}
@media (max-width: 412px){
  .announcement-bar__message.h5{
     font-size: 11px; 
  }
}
@media (max-width: 427px){
  .announcement-bar__message.h5{
     font-size: 12px; 
  }
}

It’s important to start from 309px and go to 427px and not from 427px to 309px