Hi @emilier ,
I checked your store. You can refer screenshot below to adjust code.
Topic summary
A user implemented a transparent header by editing their theme.liquid file, which worked on desktop but created an unwanted white line above the header on mobile devices.
Problem Details:
- White space/line appearing above transparent header on mobile view only
- Issue occurred after custom code modification to theme.liquid
- Store: sublime-studios.co (password-protected)
Solutions Offered:
Multiple community members provided CSS fixes targeting different elements:
- Adjust header padding/margin - Add negative margin-top to
.headerclass - Modify MainContent positioning - Change margin-top value from -73px to -97px for
#MainContent - Update theme.liquid code - Revise the original transparent header implementation
- Adjust banner media positioning - Add negative top positioning to
.banner__mediaelement
All solutions used @media screen and (max-width: 749px) to target mobile devices specifically.
Resolution:
The issue was successfully resolved. The user confirmed one of the provided solutions worked, though they didn’t specify which approach they implemented.
1 Like