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

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.

@bjohns Please help me replace the code you added with this new one as the same place, it would not change the desktop