Help needed: Remove white space above header on mobile

Store Design
, ,
1

Hi. I made some code changes a couple of months ago to my development website. I then deleted one of these code changes and kept the others. The website is now in a spot I am happy with, however - on mobile there is now a white space above the header and banner, where I believe previously the colour of this space would be taken from the header colour.

I documented all of the code changes that I did, and what I then deleted. However I now cannot find where those code changes are (I can’t remember where I made them) - or even what code changes affect the colour of this white space.

CODE CHANGES I MADE:

CODE CHANGES I ADDED THEN DELETED:

}
div#menu-drawer {background: #004D45;}

.menu-drawer__menu-item, .menu-drawer__menu-item–active, .menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {color: #fff;}
.header__icon,
.menu-drawer__close-button:focus,
.menu-drawer__close-button:hover,
.menu-drawer__menu-item–active,
.menu-drawer__menu-item:focus,
.menu-drawer__menu-item:hover,
.list-social__link,
.header__active-menu-item {
color: #fff !important;
}

See screenshot of the white space that I want to go back to how it was. i.e. I will likely always have a banner above the header on the website and I can’t remember if the white space was originally the banner colour, and then on scroll it changes to header colour, or whether it was always just the same colour as the header.

IMG_7060.jpg
IMG_7060.jpg1125×2025 292 KB

This is the free Taste theme FYI.

Does anybody know how to rectify this? Any comments much appreciated.

Thanks, Aaron.

1 Like
2

Hey @Aaronzw
Kindly share your Store URL and Password if enabled so that I can assist you with a solution to remove the white space above the header on mobile preview

3

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

4

https://nood-essentials.myshopify.com/

shopPASS3

5

https://nood-essentials.myshopify.com/

pword = shopPASS3

1 Like
6

Hey @Aaronzw

I’m unable to see any white space above header, can you please point it out exactly where you’re seeing the whitespace?

Moeed_0-1686208062109.png
Moeed_0-1686208062109.png316×682 159 KB

Best Regards,
Moeed

7

Hi Moeed thanks for your reply. I am using an iPhone X which has the camera notch at the top. So when I view my website on it the yellow banner goes up to the bottom of the notch, and then there is white space above that. The screenshot obviously doesn’t show where the camera notch is, but is replaced with the white space. See my screenshot where white space is at very top. I guess on mobile’s where there is no camera notch or dynamic island (iPhone 13 etc) then it would be similar to how it’s viewed on a desktop (e.g like your screenshot where it’s flat at the top of the device. But as I said it wasn’t like this when I originally installed the theme…

InkedIMG_7060.jpg
InkedIMG_7060.jpg1125×2025 296 KB

8

Hello @Aaronzw

Can you send me the screenshot that is very clear to me? i checked your query, but there is no white space.

9

IMG_7061.jpeg
IMG_7061.jpeg222×400 22 KB

circled in red where white space is always viewable during scroll on every page using iPhone X (and any iPhone that has a camera notch or dynamic island)

10

Hello @Aaronzw

This is mobile space not site space.

Thank you!

11

Yes I agree but when I installed the Taste theme this mobile space was filled with the colour from either the banner or the header menu (I can’t remember which one now) but it changed when I added one of the code edits mentioned in my original post). See screenshot of this website not built on Shopify where the mobile space takes on the colour of the header. This is what my site was like originally.

IMG_7062.jpeg
IMG_7062.jpeg1125×1208 108 KB

12

I found the solution:

It’s basically this line in theme.liquid , or head.liquid etc depending on the theme. add the Hex colour after content=
1 Like
13

hey did you find a solution for this i have the same issue .-.