How to make logo scale to fit properly on mobile? Dawn V11

Technical Q&A
, ,

Topic summary

A user’s logo displays correctly on desktop but doesn’t scale properly on mobile devices in Shopify’s Dawn theme version 11.

Initial Solution Attempt:

  • Support provided CSS code to paste in theme.css targeting mobile viewports (max-width: 767px)
  • Code adjusted header padding and element display properties
  • User reported this didn’t work and unintentionally added a hamburger menu

Working Solution:
The second CSS approach successfully resolved the issue:

  • Modified header padding-top to 20px
  • Reset header heading margin-left to 0
  • Adjusted header heading link positioning
  • Alternative suggestion included pasting code in theme.liquid before the </body> tag

Resolution: The problem was solved using the revised CSS code, with the user confirming it worked correctly.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
6

Please accept my solution not your reply