Mobile Announcement Bar Text Not Centered in Dawn Theme

Store Design

Topic summary

A user is experiencing an issue where the announcement bar text in the Dawn theme is not centered on mobile devices, despite trying various code solutions found in previous discussions.

Solutions Provided:

Multiple community members offered CSS code fixes, all targeting the announcement bar styling:

  • Most solutions involve adding CSS to the base.css file (found in Online Store > Themes > Actions > Edit Code > Assets)
  • One alternative suggests using the Custom CSS section in Theme Settings
  • The CSS code targets .announcement-bar__message with text-align: center properties
  • Some solutions include media queries specifically for mobile viewports (max-width: 768px)

Resolution:

The original poster confirmed that one of the provided solutions successfully resolved the centering issue on mobile view.

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

No matter what code I try to input from searching previous people who’ve had the same issue, I cannot get this announcement bar text to center on the mobile view. Any help is appreciated.

https://np09cy3x2pk6tcl4-89214681390.shopifypreview.com

AndreaH3737_0-1731906923403.png

1 Like
2

Hello @AndreaH3737

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.announcement-bar__message {
text-align: center !important;
}

ZestardTech_0-1731907250862.png
ZestardTech_0-1731907250862.png902×266 45.9 KB

1 Like
3

hi apply this css

p.announcement-bar__message.h5 {
    text-align: center;
}

p.announcement-bar__message.h5 span {
    display: inline-block;
    text-align: center;
}
4

Hi @AndreaH3737 ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

#shopify-section-sections--23617540784430__announcement-bar .announcement-bar__message {
    text-align: center !important;
}
5

Hi @AndreaH3737

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.
@meida screen and (max-width: 768px){
#shopify-section-sections--23617540784430__announcement-bar p.announcement-bar__message {
    text-align: center !important;
}
}

Here is the result: https://prnt.sc/bXrQq8kgMq3t

I hope this helps

Best,

Daisy

6

Thank you!

1 Like
7

Hello @AndreaH3737

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.