Reducing text size of announcement bar on MOBILE ONLY

Store Design
1

Hi, I am debut theme & want to reduce the text size on the announcement bar for mobile devices (as desktop is okay)

I searched the form and placed the below code in my theme.liquid file (I could not find a theme.scss.liquid) but it hasn’t worked

@media(max-width: 500px){
    .announcement-bar__message {
        font-size:12px
    }
}

What else can I try?

www.pickleandpug.com

PW: blowla

2

Hii, @PickleandPug
Paste this code on top of the theme.scss file.

@@media only screen and (max-width: 768px) {
p.announcement-bar__message {
    font-size: 15px !important;
}
}

Thank You.

3

First off, that’s CSS code, you can’t just pop it into theme.liquid. You’re just outputting the code:

Ninthony_0-1632754676501.png
Ninthony_0-1632754676501.png1647×241 14.3 KB

You’ll have to put that inside style tags if you’re not pasting it into a stylesheet:

However, you do have a theme.css.liquid file in your assets folder. You can put the code in the bottom there. You might want to add an important flag just in case there’s some other more specific style:

@media(max-width: 500px){
    .announcement-bar__message {
        font-size:12px!important;
    }
}
1 Like
4

@Ninthony Thank you so much for explaining. That has worked a treat :slightly_smiling_face: I really appreciate your help!

5

No problem, glad it helped.