Made the code edit at base.css instead. Still encountering the same. Can help?
@media screen and (max-width: 767px){
h1.header__heading, .header__heading-link {
margin-left: 13px !important;
}
Topic summary
A Shopify store owner is experiencing header icon misalignment issues on mobile view. The icon displays correctly and centered on the homepage, but appears off-center on other pages.
Troubleshooting attempts:
- Initially added CSS code to theme.liquid file before the head tag
- Applied media query targeting screens with max-width 767px to add 13px left margin
- Later moved the CSS to base.css file as recommended
Current status:
The CSS is now functioning, but it’s pulling the logo to the left instead of centering it on screens below 767px width. A helper has questioned whether this left-aligned result is the intended outcome, suggesting the current code may be achieving the opposite of what’s desired. The issue remains unresolved as clarification is needed on the actual alignment goal.