Hi,
I need to centre align my logo on my desktop and mobile. It’s completely off on my mobile and very slightly on desktop.
dawn theme.
Topic summary
A Shopify store owner reports logo misalignment issues on both desktop (slight) and mobile (significant) for their site www.slidein.co.in, which uses the Dawn theme. Screenshots demonstrate the problem.
Two CSS solutions proposed:
Solution 1 (Moeed):
- Add custom CSS to theme.liquid file (above tag)
- Targets logo centering with specific styling code
- Includes before/after screenshot showing centered result
Solution 2 (LizHoang):
- Add CSS to base.css file
- Uses media query for mobile devices (max-width: 768px)
- Removes right margin from header logo elements
- Also includes visual result confirmation
Both solutions involve editing theme code files and provide CSS snippets to override default alignment. The issue remains unresolved as the original poster hasn’t confirmed which solution worked.
1 Like
Hey @slidein_india
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
@media (max-width: 768px) {
.header__heading-logo {
margin-right: 0px !important;
}
.header__heading, .header__heading-link {
margin-right: 0px !important;
}
}
Result:
Best,
Liz