Mobile header margin problem in Dawn theme

Store Design

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.
6

@Levike98 add !important to it, so it becomes

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