Hi, I need to make this custom font announcement bar text a bit smaller but on mobile only. Please do not change the desktop.
How do I do this?
Thank you 
Using dawn
https://dummytesting123403.myshopify.com/
password: meow
Topic summary
Mobile-only reduction of announcement bar text size in the Shopify Dawn theme. The original poster wants smaller text on mobile without affecting desktop.
Proposed solutions:
- Edit theme code (base.css) and add a CSS media query to apply a smaller font size below a specific viewport width. One reply targets the announcement bar message class at max-width ~749px and shows a screenshot of the smaller text result.
- Another reply suggests a media query at max-width ~767px that sets span.h2 to 18px, also placed in base.css via Online Store > Themes > Actions > Edit code.
Follow-up and current status:
- A later participant reports the suggestions didn’t work for their site and asks for assistance, specifically to reduce the announcement banner height on mobile. No confirmed fix or next steps are provided, and the thread remains unresolved.
Key terms:
- Announcement bar: the top-of-site message area.
- CSS media query: applies styles only below a given screen width.
- base.css: the theme’s stylesheet where custom CSS can be added.
Attachments: Screenshots illustrate the mobile font-size change outcome.
Hello @kirstenlc5 
To do that, in Shopify Admin, go to Themes > Edit code, open file base.css and add this code snippet at the bottom
@media (max-width: 749px) {
.announcement-bar__message {
font-size: 10px !important;
}
}
The result
Hope that helps!
Hi @kirstenlc5 .
This is PageFly - Advanced Page Builder.
You can go to Online store => themes => actions => edit code and add this code on file base.css
@media screen and (max-width: 767px){
span.h2 {
font-size: 18px !important;
}
}
Hope this answer helps.
Best Regards,
PageFly
Hi, this is not working for me, can you assist?
hi can you provide a solution for me? I want to reduce the announcement banner height on my mobile site.