How can I adjust my mobile view font size to fit on one line

Topic summary

Goal: make mobile hero text fit on one line and center the announcement bar text (“30 day growing guarantee”).

Proposed CSS-based approaches (mobile-only via media queries):

  • Adjust hero title size: examples suggest max-width ~749–767px and font-size around 27–31px targeting selectors like .m-hero__content .m-hero__title.h2 or h3 within .m-hero__inner…
  • Force single-line titles where needed: add white-space: nowrap (shown for product card titles) and use a responsive font-size (e.g., 4vw) to scale on small screens.
  • Center announcement bar: apply .m-announcement-bar__link { text-align: center; } within a mobile media query.

Where to place code varies:

  • In theme.liquid inside within a block.
  • Before in theme.liquid.
  • At the end of Assets/base.css.

Notes:

  • Multiple screenshots illustrate where to edit code and the mobile result.
  • Two replies appear to reference adding code but include empty code blocks.

Status: no confirmation from the original poster; solution not yet marked. The key open item is selecting the correct selector(s) for the store’s theme and confirming the change resolves both the one-line fit and centered announcement text on mobile.

Summarized with AI on December 26. AI used: gpt-5.

Hello,

I am San from MS Web Designer.

Go to Themes > Edit code > Theme.liquid > at the bottom place this code before


Do let me know in case of any concerns.

Regards,

San