change font size of announcement bar desktop

Store Design
, ,

Topic summary

A user wants to increase the announcement bar font size on desktop while keeping mobile unchanged on their Dawn theme store (marcomontesi.com).

Solutions Provided:

Multiple respondents offered CSS code snippets targeting desktop screens only using media queries:

  • Option 1: Add CSS via Theme Settings > Custom CSS targeting .announcement-bar__message with font-size: 12px for screens min-width 750px

  • Option 2: Similar approach using 1024px breakpoint with font-size: 20px (includes before/after screenshot)

  • Option 3: Insert CSS in theme.liquid file above </head> tag

  • Option 4: Modify base.css file directly, adjusting the h5 heading size using CSS variables for screens 750px+

Key Differences:

Solutions vary in implementation location (Custom CSS vs. theme files), breakpoint widths (750px vs. 1024px), and font sizes (12px, 20px, or calculated values). All use @media queries to apply changes only to desktop viewports.

Status: Multiple solutions offered; awaiting user confirmation on which approach worked.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

hello, i want to change the font size of my announcement bar for desktop, but keep it the same for mobile

Screenshot 2025-01-09 at 11.20.55.png

website is www.marcomontesi.com , theme is dawn

2

Hi @ads18922

Please add this code to Custom CSS in Sale Channels > Online Store > Themes > Customize > Theme settings.

@media (min-width: 750px) {
html p.announcement-bar__message.h5 {
    font-size: 12px;
}
}
3

HI @ads18922

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (min-width: 1024px){
p.announcement-bar__message {
    font-size: 20px !important;
}
}

Here is the result:

image_720.png
image_720.png720×257 61.6 KB

I hope this helps

Best,

Daisy

4

Hi @ads18922
Please follow the steps
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:

Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a
solution. Thank you :heart_eyes:

5

Hello @ads18922
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media only screen and (min-width: 750px) {
h5, .h5 {
font-size: calc(var(--font-heading-scale)* 1.7rem);
}
}

result

129.png
129.png1312×167 16 KB

If this was helpful, hit the like button and accept the solution.
Thanks