Mobile header margin problem in Dawn theme

Topic summary

A user encountered a logo alignment issue in the Dawn theme’s mobile header. The logo wasn’t flush left like the cart icon was flush right, despite being left-aligned in settings.

Solution provided:

  • Add CSS code to the end of base.css file (Shopify Admin → Online Store → Theme → Edit code)
  • Target the header with left/right padding adjustments using a media query for mobile screens (max-width: 749px)
  • Initial CSS didn’t work until !important flags were added to override existing styles

Outcome:
The issue was resolved after applying the modified CSS with !important declarations. The problem only affected mobile view; desktop display was correct.

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

Hi, I left centered my logo, but on mobile view its not fully goes to the left like the “CART” icon on the right. And no, there isnt any white space on the logo. Is there anyone who can help solving this issue?

@Levike98 - can you please share your website link?

https://04qfpa-gq.myshopify.com/

@Levike98 - please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

adjust numbers as per the need

@media screen and (max-width: 749px) {
.header{padding-left: 0; padding-right: 10px;}
}

Still the same :confused: Its so annoying, cuz the margin is fine in the web view.

@Levike98 add !important to it, so it becomes

@media screen and (max-width: 749px) {
.header{padding-left: 0 !important; padding-right: 10px !important;}
}

Thanks! worked :slightly_smiling_face: