How can I adjust the announcement bar font size for mobile view?

[le_X_Atelier]

Hey everyone,

can somebody tell me how i can change the font size of the announcement bar?

As you can see the font size is too big for the mobile version. I want it a little bit more discreet. The desktop version is good but for mobile version it is too big…

Thanks for your help.

Store URL: www.le-x-atelier.com

PW: djerba

[PageFly-Oliver]

Hi [email removed]Le_X_Atelier_,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file → Save

@media(max-width:767px){
#node-marquee *{
font-size:13px !important
}
}

Hope my solution works perfectly for you.

Cheers!

Oliver | PageFly

[NomtechSolution]

1. Scroll down the file until you find the section that controls the styling of the announcement bar. It may be indicated with a comment or contain a class such as “.announcement-bar” or “.announcement-bar__message”.

2. Within that section, you can add the following CSS code to adjust the font size:

@media only screen and (max-width: 767px) {
  .announcement-bar__message {
    font-size: 14px; /* Adjust the value to your desired font size */
  }
}

[oscprofessional]

Hello @le_X_Atelier

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (max-width: 749px){
.node-marquee__el {
    font-size: 14px !important;
}
}

[INA_MSWEB]

Hi @le_X_Atelier

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:
@mediascreen and (max-width: 565px) {
.announcement-bar .node-marquee .node-marquee__el span {font-size: 12px !important;}

}

Regards,

San

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset → base.css and paste this at the bottom of the file:

@media(max-width:767px){
.node-marquee {
    font-size: 15px;
}
}