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?
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.cssfile (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
!importantflags 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.
@Levike98 - can you please share your website link?
@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
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 ![]()
