Mobile header bleeding troubleshooting - dawn theme

Store Design
, , , , , , ,

Topic summary

A user encountered unwanted white space in the mobile header of their Shopify store using the Dawn theme’s latest version.

Solutions Provided:

Two respondents offered similar CSS fixes to resolve the issue:

  • Method 1: Add custom CSS code directly to the theme’s CSS file (base.css or custom CSS file) via the code editor
  • Method 2: Use the built-in Custom CSS section in Theme Settings (Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS)

CSS Code:

Both solutions use the same CSS snippet targeting sections with banner content:

@media screen and (max-width: 749px) {
  section:has(.banner__content) {
    margin-top: -12px !important;
  }
}

This applies a negative top margin specifically on mobile devices (screens under 749px width) to eliminate the white space gap. One respondent included a screenshot showing the successful result after implementation.

Status: Solutions provided; awaiting user confirmation of resolution.

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

Dawn latest version, in that mobile view header has some white space how to remove that.

website : https://rugd-in.myshopify.com/

password: rugged

WhatsApp Image 2024-11-06 at 15.31.57_11084f11.jpg
WhatsApp Image 2024-11-06 at 15.31.57_11084f11.jpg738Ă—1600 94 KB

2

Hello! @Sivadarshan Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
@media screen and (max-width: 749px) {
 section:has(.banner__content) {
    margin-top: -12px!important;
 }
}

HuptechWeb_0-1730890301349.png
HuptechWeb_0-1730890301349.png551Ă—764 156 KB

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the Accepted Solution.
Best regards
K.K

1 Like
3

Hi @Sivadarshan

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
section:has(.banner__content) {
    margin-top: -12px !important;
}
}

Here is the result: https://prnt.sc/Vlv1Dz-gcKvO

I hope this helps

Best,

Daisy

1 Like