Solved

Reducing text size of announcement bar on MOBILE ONLY

PickleandPug
Tourist
6 0 0

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

Accepted Solution (1)

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

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

 

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


<style>
@media(max-width: 500px){
    .announcement-bar__message {
        font-size:12px;
    }
}
</style>

 

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;
    }
}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 4 (4)

Zworthkey
Shopify Partner
5581 642 1565

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.

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

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

 

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


<style>
@media(max-width: 500px){
    .announcement-bar__message {
        font-size:12px;
    }
}
</style>

 

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;
    }
}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
PickleandPug
Tourist
6 0 0

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

Ninthony
Shopify Partner
2329 350 1023

No problem, glad it helped.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄