Align Text to the left on Image with Text Component for mobile view, Dawn Theme

Topic summary

Main issue: On Shopify’s Dawn theme (mobile view), the Image with Text section showed excessive left whitespace. The goal was to align the text flush with the image’s left edge and extend it to the right edge for a full-width look.

Proposed solutions:

  • Edit base.css: Add a mobile media query (max-width: 749px) to set horizontal padding to 0 for the Image with Text content (e.g., padding: 10px 0 or explicitly padding-left/right: 0) so text aligns with the image edges.
  • Alternative via theme.liquid: A snippet was suggested (details not shown), with screenshots demonstrating the desired result.

Outcome:

  • The store owner confirmed both approaches worked. They combined the ideas by ensuring padding-right: 0 in addition to removing left padding, achieving edge-to-edge text alignment under the image on mobile.
  • Shared screenshots were central to confirming the visual outcome.

Status: Resolved. No further questions or pending actions. Technical note: Changes are scoped to mobile via a media query at the 749px breakpoint to avoid affecting desktop layout.

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

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.