Transparent header looks weird on mobile

Store Design
, ,

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:

  1. Adjust header padding/margin - Add negative margin-top to .header class
  2. Modify MainContent positioning - Change margin-top value from -73px to -97px for #MainContent
  3. Update theme.liquid code - Revise the original transparent header implementation
  4. Adjust banner media positioning - Add negative top positioning to .banner__media element

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.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I just recently edited the theme.liquid code to make my header transparent. It worked well but on the mobile version there is a white line above the header… (see the screenshot)

Can anyone help me fix that?

Screenshot 2025-04-08 at 9.40.16 AM.png
Screenshot 2025-04-08 at 9.40.16 AM.png808×616 130 KB

2

Hi @emilier , please share your website link so I can help fix it.

3

Thank you for the quick reply! My link is sublime-studios.co the password is IMRICH2002

4

Hello @emilier
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
.header {
padding: 8px 3rem 8px 3rem;
margin-top: -23px !important;
}

result

100.png
100.png375×505 58.9 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

Hi @emilier ,

I checked your store. You can refer screenshot below to adjust code.

EBOOST_0-1744099532350.png
EBOOST_0-1744099532350.png1688×816 144 KB

EBOOST_1-1744099616452.png
EBOOST_1-1744099616452.png1570×811 134 KB

1 Like
6

Hi @emilier ,

Please change code:

@media (max-width: 749px) {
    html #MainContent {
        margin-top: -73px;
    }
}

=>

@media (max-width: 749px) {
    html #MainContent {
        margin-top: -97px;
    }
}
1 Like
7

Hi @emilier , the code you added in your theme.liquid file, please update that to the following and that will fix the issue.
8

Hello @emilier ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (max-width: 749px){
.banner__media.media.scroll-trigger.animate--fade-in {
    top: -23px !important;
}
}

ZestardTech_0-1744105144198.png
ZestardTech_0-1744105144198.png355×759 99.2 KB

Let me know if you need further assistance!

9

That worked, thank you!