Make Announcement bar text appears in one line only on mobile device

Shopify Discussion

Topic summary

Goal: make the announcement bar text display on a single line on mobile without affecting desktop.

  • Proposed fix: add a mobile-only CSS rule via Theme Settings > Custom CSS:
    @media screen and (max-width: 600px) { .announcement-bar.page-width { padding: 0 !important; } }
    This targets mobile to reduce padding; no confirmation yet that it forces a single line. A screenshot was shared; outcome not reported.

  • Additional request: make the announcement bar transparent and the same color on mobile as on desktop. No code provided yet for this; unresolved.

  • Separate issue raised: in the Dawn theme (Shopify’s default theme), the “Buy Now” button disappears on product pages when a variant (e.g., size/color) is selected. Helper asked for a specific product; the merchant said it affects all variant products and shared a product URL for reproduction. Root cause and fix not identified yet.

Status: discussion remains open. Next steps likely include verifying the CSS impact on the announcement bar and investigating the variant-selection behavior causing the “Buy Now” button to hide.

Summarized with AI on January 6. AI used: gpt-5.
1

Hey , can you please help me to make announcement bar text appears in only one line on mobile device , no changes on desktop please help me

My store url is – https://mansaroverfurnishings.com/

manan123_0-1707296078359.png
manan123_0-1707296078359.png1183×2191 408 KB

2

Hi @manan123 . You can add the followings:

  1. Go to your theme editor

  2. From Theme Settings click Custom CSS

  3. Paste the below code there:

@media screen and (max-width: 600px) {
  .announcement-bar.page-width {
    padding: 0 !important;
  }
}

Please let me know if you’ve any query.

Faisal Ahmed | Brain Station 23

  • Was my reply helpful? Click Like to let me know!
  • Was your question answered? Mark it as an Accepted Solution
1 Like
3

Hey can you please help me

I’m using dawn theme for my store but when i chose another variant on product page the buy now button gets disappeared please help me to solve this …

my website url is — https://mansaroverfurnishings.com/

4

@manan123 for which product? I mean a product which has a variant can you mention?

Faisal Ahmed | Brain Station 23

5

can you please help me to make my announcement bar transparent & of same colour on mobile device also as it is on desktop device??

store url –https://mansaroverfurnishings.com/

6

all the products which have variant options having same issue i’m giving you the direct url please check whats the problem, when i click on variant the buy now disappears,

url of products;; https://mansaroverfurnishings.com/products/arrow-verse-winter-bedsheets-collection-by-ross-14