Mobile Announcement Bar Text Not Centered in Dawn Theme

Store Design
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.