Customizing Announcement Bar on Mobile (Sense Theme)

Store Design

Topic summary

Customization request: make the announcement bar text smaller on mobile in the Sense theme without affecting desktop. The desktop message fits on one line, while mobile wraps to two lines.

Constraint: directly changing font-size in base.css affected both desktop and mobile.

Solution provided: add a mobile-only CSS media query in base.css. Steps: Online Store → Theme → Edit code → Assets → base.css, then paste:
@media (max-width:767px) { p.announcement-bar__message.h5 { font-size: 10px !important; } }

Technical note: a CSS media query applies styles only when the viewport width meets the condition (here, screens ≤767px, typical mobile). The !important flag ensures the mobile font-size overrides existing styles.

Outcome: the change worked as intended; mobile font size was reduced without affecting desktop.

Status: resolved; no further actions or open questions indicated.

Summarized with AI on February 7. AI used: gpt-5.
1

Hi there! I would like to be able to customise the code of the announcement bar, with desktop and mobile separately.

My problem is, on Desktop, the message is on one line. Whereas on mobile, it’s 2 lines. I would like to make the text smaller on mobile, without affecting the Desktop.

shaz26_0-1665028914919.png
shaz26_0-1665028914919.png1640×934 202 KB

shaz26_1-1665028933663.png
shaz26_1-1665028933663.png448×806 253 KB

I’ve tried editing the code, but with my limited knowledge on it, I dont know what code to edit/adjust. Below is my “base.css” announcement bar code:

shaz26_0-1665029457244.png
shaz26_0-1665029457244.png906×1022 32 KB

Yes, I’ve tried editing the font-size, but it changed both dekstop & mobile. What I wanna do is to create another code (maybe?) that would only work on mobile.

My website is: https://kiyo.com.au

How can I do that? Thank you!

2

Hi @Shaz26

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset-> base.css paste the below code at the bottom of the file.

@media(max-width:767px){

p.announcement-bar__message.h5{font-size:10px !important}

}

PageFly_0-1665029438939.png
PageFly_0-1665029438939.png303×567 150 KB

Hope my solution works perfectly for you!

Best Regards;

PageFly

1 Like
3

OMG you are amazing!! THANK YOU SO MUCH!! Works perfectly.

1 Like