How to make the text on the announcement bar smaller in mobile version

Shopify Discussion

Topic summary

A Shopify store owner wants to reduce the announcement bar text size specifically for mobile devices.

Two CSS solutions were provided:

  1. LizHoang’s approach: Add code to the base.css file in the theme’s Edit Code section, targeting screens up to 768px width with a 9px font size.

  2. DaisyVo’s approach: Use the Custom CSS section in Theme Settings (Shopify Admin > Online Store > Theme > Customize), also targeting screens up to 768px but with a 10px font size.

Both solutions use CSS media queries with @media (max-width: 768px) to apply changes only to mobile viewports. Screenshots were included showing the expected results. The issue appears resolved with working code examples provided.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hey there,

I hope you are doing well. I want to make the text on my annoucnement bar smaller, but only in the mobile version. How can i do that with a code?

Thanks in advance! Have an amazing day!

Cheers,
KRAFTIO

2

Hi @Kraftio_BG

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

@media (max-width: 768px) {
p.announcement-bar__message.h5 span {
    font-size: 9px !important;
}
}

Result

LizHoang_0-1740014176463.png
LizHoang_0-1740014176463.png347×217 17.1 KB

Best,

Liz

3

Hi @Kraftio_BG

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 (max-width: 768px){
p.announcement-bar__message * {
    font-size: 10px !important;
}
}

Here is the result:

image_720.png
image_720.png720×388 161 KB

I hope this helps

Best,

Daisy