Ho to reduce font size in the header on mobile?

[KimGottwald]

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.

[Made4uo-Ribe]

Hi @KimGottwald 

Which header your referring to? 

[KimGottwald]

I meant the announcement bar, sorry.

 

[WalkYourStyle]

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; 
  }
}

[WalkYourStyle · Accepted solution]

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