How to remove/change to white, the black background at the top and bottom of website on mobile view

Technical Q&A
1

Hi,

So after creating my store, I noticed that my page doesn’t stretch all the way to the top of my screen on mobile phones. It cuts off right beneath the notch on my iPhone 11. When I pull down my page to refresh it, the black background/bar expands and elastics back and this is the same for the very bottom of my page.

Can someone please help me either get rid of this or change the background colour which is behind my page into white so it’s consistent with my page colour and there is continuity on my page.

Thanks. Pictures below.

IMG_6657.jpg
IMG_6657.jpg828×1792 132 KB

  1. The clock area is black rather than being consistent with the page.

IMG_6658.jpg
IMG_6658.jpg828×1792 129 KB

  1. When page is pulled down to refresh

IMG_6659.jpg
IMG_6659.jpg828×1792 57 KB

  1. When page is pulled up from the bottom.
2

Hi @Musti ,

  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.scss->paste bellow code in bottom of file

@media only screen and (max-width: 768px) {

#navBar {
background-color: #fff;
}
#MobileNav .mobile-nav a {
color: #000;
}
#MobileNav .mobile-nav–button::before {
color: #000;
}
}

Hope it will help you.

1 Like
3

Under Assets mine shows the option theme.js and not theme.scss. Also, I pasted the above code and nothing happened. Thanks

1 Like
4

Hi @Musti ,

Hope this video will help you :https://youtu.be/SPKTvNTCo28

Hope it helps you.