Change font size for announcement bar on mobile

Store Design
, , ,

Topic summary

Goal: adjust the Dawn theme’s announcement bar to use a larger, bold font on mobile only (leaving desktop unchanged).

Proposed solutions:

  • Add custom code in theme.liquid before the tag. The reply references this approach but the actual code snippet wasn’t included; a screenshot indicates the visual result worked for the responder.
  • Add CSS in the theme’s main CSS file (base.css/style.css/theme.css): apply a mobile-only media query (max-width: 749px) targeting the announcement bar message selector (p.announcement-bar__message.h5) to increase font-size (e.g., 1.5rem) and set font-weight to 900. This confines the change to mobile widths and makes the text bold.

Key details:

  • Uses a CSS media query to scope changes to mobile screens; increasing font-size to a relative unit (rem) and font-weight to 900 achieves the requested look.
  • Images were provided to show the desired before/after result.

Status: no confirmation from the original poster that a solution was implemented; discussion appears open without a verified resolution.

Summarized with AI on December 15. AI used: gpt-5.
1

I want to change my font size for the announcement bar on mobile but not mobile. Also I would like to change the text so that it is bold:

Screenshot 2024-11-05 at 16.54.29.png
Screenshot 2024-11-05 at 16.54.29.png855Ă—238 7.63 KB

I want to change it from this, to something like this:

IMG_1890.jpg
IMG_1890.jpg1170Ă—224 13.4 KB

I am using dawn theme

This is my store domain: qmpryp-cx.myshopify.com

and this is my password: chasha

1 Like
2

Hey @ads18922

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1730826395469.png
Moeed_0-1730826395469.png379Ă—651 31.1 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @ads18922

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
p.announcement-bar__message.h5 {
    font-size: 1.5rem;
    font-weight: 900;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!