Unwanted color on top and bottom of page

Site URL: https://www.nadiaizazi.com/

Hi there!

There's a block of yellow that shows up when I scroll all the way up and down of my mobile site. I can't seem to figure out how to change it to white.

Can someone please assist me on this? 

Thank you!

Nadia

Hi. It looks fine here. Which mobile/browser do you use?

Hi Tuanphan! Sorry for the late response, I wasn't notified so I didn't know you replied.

I used google chrome and safari, and they both are showing the yellow color on top of my header and underneath my footer. You have to drag the screen all the way up or down and the color will show. They don't stay there either after you let go of your finger, but the color always appears whenever I swiftly scrolls the screen. I know it's such a small thing but it bothers me so much! 

Really hope you can help me solve this. Thank you so much!!

I just realized I can even find the color around the site (please see attached). Seems like this might be the site 'theme' color, but I just don't know how to change it. 

Hope this helps you in assessing what can be done to solve the issue. Thank you!!

Try adding to Design > Custom CSS

body {
    background: white !important;
}

That works!! Thank you so much!

Hiya! Old thread, I realize- but I've found the actual vanilla config for this.

In your color themes, find the primary one that your site is treating as a default (when you go to add a new section, it's probably the one that Squarespace is picking for you by default).

Find the Background option and change this to the color you would like your Safari mobile top and bottom to be:

I know this is an old thread! On my home page menu I have my background as a photo. On laptops and mobiles at the bottom of the screen is a line of red, how do I get my homepage so it has no line of red at the bottom - so it's just a full screen of my photo? (Hope that makes sense)

Here is a link to my site: http://www.etdphotography.co.uk/

16 hours ago, emmaburtonblog said:

I know this is an old thread! On my home page menu I have my background as a photo. On laptops and mobiles at the bottom of the screen is a line of red, how do I get my homepage so it has no line of red at the bottom - so it's just a full screen of my photo? (Hope that makes sense)

Here is a link to my site: http://www.etdphotography.co.uk/

Try using this CSS code (Website Tools > Custom CSS)

body.homepage {
	overflow: hidden;
}
@media screen and (max-width:767px) {
body.homepage article section:first-child {
    height: 100vh !important;
}
}

On 1/11/2024 at 2:07 AM, tuanphan said:

Try using this CSS code (Website Tools > Custom CSS)

body.homepage {
	overflow: hidden;
}
@media screen and (max-width:767px) {
body.homepage article section:first-child {
    height: 100vh !important;
}
}

 

I believe this has worked! I can still see the red in edit mode at the bottom of the Home Screen, however when I go on my live site on my phone/laptop the red has gone!