Removing the thin white line above the header

Store Design

Topic summary

A user is experiencing a thin white line appearing above their header, but only in mobile view (specifically mobile M and L breakpoints). They’ve attempted several CSS solutions targeting borders and padding on the header element without success.

Proposed Solutions:

  • One responder suggested the issue stems from default borders/margins, background mismatches, or mobile-specific wrapper padding. They provided CSS targeting the site header with media queries to remove borders, margins, and ensure background color consistency.

  • Another contributor identified the root cause through browser inspection: the .header__logo has a calculated height of ~49.33px on mobile. Setting max-height: 45px (or any value below 48px) via media query eliminates the white line, suggesting it’s related to height calculations and possibly CSS variables like --announcement-bar-height.

Current Status:

The initial CSS fix didn’t resolve the issue. The height-based solution appears promising but hasn’t been confirmed as working on actual devices yet. The discussion remains open with offers for further assistance.

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

Does anyone know how to remove this small white bar only in mobile view underneath my header in coding? I’ve tried everything to remove it and I can’t figure it out. Thanks!

1284×238 46.2 KB

Code I’ve tried:

  • .site-header {
    border: 0 !important;
    }

  • theme-header#header {
    border: none;
    }

  • .media > *:not(.zoom):not(.deferred-media__poster-button),
    .media model-viewer {
    height: calc(100% + 2px);
    bottom: 0;
    }

Here is the url: 974c96-74.myshopify.com

1 Like
2

Hey! That thin white line issue on mobile is usually caused by either:

  1. A default border or margin from the header or announcement bar
  2. A background mismatch between stacked elements on mobile view
  3. Padding/margin from a wrapper div that only appears in mobile layout

From what you described and tried, you’re close — but here’s one more approach to test:

css

CopyEdit

@media only screen and (max-width: 768px) {
  .site-header {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important; /* or match your header bg */
  }

  header[role="banner"] {
    border: none !important;
    background: #000 !important;
  }
}

Also inspect the body or html background color on mobile — sometimes a slight gap is from the parent container showing through.

If it’s still giving trouble, I’d be happy to take a quick look and fix it — I help Shopify store owners clean up layout issues like this regularly.

Let me know if you want me to jump in and patch it.

1 Like
4

Thanks for your reply. The code didn’t seem to work. I inspected it and didn’t find anything unusual. Could you take a quick look? The line only seems to appear in the mobile M and mobile L views.

Thanks!

5

Hi @William021

Try with this, not sure if it will work on real device but in browser I could replicate it

@media screen and (max-width: 999px) {
  .header__logo {
    max-height: 45px;
  }
}

So currently calculated height on mobile is like 49.33px but if set limit to 48 or below white line disappear. On 50px it does show. IT could also be connected with
–announcement-bar-height and --header-height variables but just try code.

1 Like
7

Hello, how are you doing? there are many to solve this errors, do you have time to discuss how this can actually be solved?