In my website’s mobile view the header has some white space like bleeding, can anyone please help to fix that issue. which should affect only the mobile view.
Website: https://www.taramajeans.com/
Thanks in advance
Topic summary
A user reported unwanted white space appearing above the header in the mobile view of their Shopify store (taramajeans.com). The issue creates a visual gap that needs to be fixed without affecting desktop display.
Proposed Solutions:
Two responders provided similar CSS fixes targeting the header margin:
- Solution 1: Add
margin-top: 22px !important;toheader#SiteHeaderin base.css (affects all views) - Solution 2: Add the same margin adjustment but wrapped in a media query
@media screen and (max-width:749px)to target mobile devices only
Key Difference:
The second solution is more precise as it uses a media query to ensure the fix applies exclusively to mobile view (screens under 749px width), preventing unintended changes to desktop layout.
Both solutions involve editing the theme’s base.css file through the code editor. Screenshots were provided showing the expected result after implementation.
1 Like
Hello @Sivadarshan
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.
header#SiteHeader {
margin-top: 22px !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hello @Sivadarshan ,
Here are the steps to apply the necessary changes in your Shopify store:
- In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
- Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (max-width:749px){
header#SiteHeader {
margin-top: 20px !important;
}
}
Let me know if you need further assistance!
1 Like