Shopify themes, liquid, logos, and UX
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?
PW: blowla
Solved! Go to the solution
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:
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;
}
}
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.
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:
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;
}
}
@Ninthony Thank you so much for explaining. That has worked a treat 🙂 I really appreciate your help!
No problem, glad it helped.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024