Hello - My site bylilla.com has a weird white space that appears only on mobile after you try to scroll down.
Can anybody help me?
Thanks!
Topic summary
A user reports an unwanted white space appearing at the top of their Shopify store (bylilla.com) when scrolling on mobile devices.
Proposed Solutions:
Multiple community members offered CSS-based fixes targeting the header section’s margin:
-
GemPages Support suggested editing the theme.liquid file through Online Store → Theme → Edit code, providing step-by-step instructions with screenshots
-
ZestardTech recommended adding CSS to the stylesheet.css file:
.header-section {
margin-top: 0 !important;
}
-
oscprofessional provided a similar CSS solution targeting the same header margin issue
-
Simonsron offered a mobile-specific media query approach for screens under 769px width
Status: The discussion presents multiple CSS solutions but lacks confirmation of which approach successfully resolved the issue. All solutions focus on removing top margin from the header section.
1 Like
Hello @ManuelC1212 ,
You can follow these steps:
- Go to Online Store->Theme->Edit code
- Open your theme.liquid file, paste the below code before
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
1 Like
Hello There,
Admin go to online store → themes → actions → edit code
Find Asset >stylesheet.css and paste this at the bottom of the file:
.header-section {
margin-top: 0!important;
}
.header-section {
margin: 0 !important;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
@media only screen and (max-width: 769px) {
#shopify-section-header .header-section{
margin-top:0 !important;
}
}
put that code in your stylesheet.css