Hi,
my website is www.sweatfree.co
On mobile there is this random white bar that is showing at the top and sometimes at the bottom of the page on mobile specifically. If you could please advice on how I can remove it!
Topic summary
A white bar appears unexpectedly at the top and occasionally bottom of pages on mobile devices for a Shopify store using the Dawn theme.
Proposed causes:
- Unintended padding or margin in CSS
- CSS viewport height (100vh) issues, particularly on iOS
- Overflow from hidden or off-screen elements
- Redundant code in the theme.liquid file
- Non-breaking space HTML entities (
) in the theme.liquid file
Suggested solution:
One responder identified characters in the theme.liquid file as the likely culprit (screenshot provided). They recommend searching for and removing these non-breaking spaces from the file.
Status: Awaiting confirmation from the original poster on whether the proposed fix resolves the issue.
Hey! That random white bar on mobile is a super common issue — it usually comes from either:
-
Unintended padding/margin
-
A 100vh CSS issue (especially on iOS)
-
Overflow from hidden or off-screen elements
-
probably just need a front-end design
kindly let me know if this help or you need more support
Hi @SweatFree ,
There is a redundant code shown in the theme.liquid file.
Please send me the code of the file, I will check it for you
Hi @SweatFree ,
I checked and it seems the issue might be caused by the HTML code — specifically the (non-breaking space) present in your code. Please search for it in the theme.liquid file, remove it, and let me know the result.
If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you 