I want the mobile version to match the desktop version. In mobile there’s a white area and on desktop my logo begins right under the nav bar. I can’t find anything in the code related to height. Theme is retina.
Topic summary
A user is experiencing unwanted white space in the mobile header that doesn’t appear on desktop, where the logo sits directly under the navigation bar. Multiple community members requested the store URL and password to diagnose the issue.
Two CSS solutions were provided:
-
First approach: Add code to base.css targeting screens under 749px width, adjusting
.index-sectionsmargin-top to -5px and modifying logo styling (color, font-size, padding, positioning with z-index 999). -
Second approach: Insert custom CSS in theme.liquid file above the
</body>tag with similar mobile-specific adjustments.
Both solutions include code snippets and before/after comparison images. The responders requested the user mark helpful answers as solutions and like the posts if the issue is resolved.
1 Like
Hi, @nichopsc .
Please share your Store URL And Password.
Hey @nichopsc
Kindly share your Store URL and Password if enabled
Hi, @nichopsc .
Follow these steps.
Go to the online store theme and go to base.css file paste the code mentiond below.
@media screen and (max-width: 749px) {
.index-sections {
margin-top: -5px;
}
.logo a {
color: white !important;
font-size: 22px;
}
.logo {
padding: 10px 0;
position: absolute;
z-index: 999;
margin: 0px auto;
left: 82px;
top: 6px;
}
}
Result:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Hey @nichopsc
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
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed