How can I adjust text size for mobile layout on Dawn theme?

Store Design
,

Topic summary

Adjusting image banner text for mobile in Shopify’s Dawn theme. The desktop text looked correct, but on phones it reflowed and appeared too large; the user wanted a smaller mobile-only size without changing desktop.

  • Initial guidance: Add custom CSS in theme.liquid (Online Store > Themes > Edit code > theme.liquid) above . However, the first snippet affected both desktop and mobile, making desktop text too small.
  • Revised fix: Replace with an updated snippet that applies only to mobile (implicitly via a mobile-targeted CSS approach, e.g., a media query), preserving desktop styling.

Outcome: The user confirmed the revised code solved the issue; desktop remained unchanged and mobile text was adjusted.

Notes:

  • Screenshots were provided to show the layout problem on desktop vs. mobile.
  • Code snippets are central to the solution, but the exact code content is not visible in the thread.

Status: Resolved; no outstanding questions.

Summarized with AI on January 8. AI used: gpt-5.
3

Hi Richard,

Thanks for your reply

This changes both the desktop and the mobile layout (making the desktop layout text too small). Ideally I’d like the change that you suggested to just alter the mobile layout.

Is that possible?

Many thanks.