white edges on mobile landscape viewing

Site URL: https://star-fiddle-nj7j.squarespace.com

Hi, 

I am experiencing a white edge border when viewing my site build on an iPhone in horizontal orientation, ad sneak peaking through section colours on all devices. I have managed to set colours for individual pages but would like to know if it's possible to change this base background colour as well, ideally for individual pages.

Site PW: hUD-957Lla3-Ft00 

Thanks

Graeme 

Hi,

Try adding this to Design > Custom CSS

html, body {
	overflow-x: hidden;
}

Hi tuanphan, thanks for the help.

Unfortunately it didn't change anything. If you have any further suggestions I'd be very happy to hear.

Thanks!

Graeme  

On 3/25/2021 at 3:27 PM, Fordham said:

Hi tuanphan, thanks for the help.

Unfortunately it didn't change anything. If you have any further suggestions I'd be very happy to hear.

Thanks!

Graeme  

Can you send all current code in Custom CSS(after inserting my code)?

On 3/29/2021 at 4:55 PM, Fordham said:

Hi Tuanphan,

Sure thing...

Thanks for the help.

/*custom fonts*/
a, p.sqsrte-small, p, p.sqsrte-large, h1, h2, h3, h4 {font-family: 'Inter', sans-serif;}

/*custom project h1 size*/
#collection-604fba637a9bc4009e25a639  h1 {
 font-size: 20px;
 color: #000000;
}

/* Change dropdown menu background */
.header-nav-folder-content {
   background: none !important;
}

/* HIDDEN ELEMENTS ON MOBILE*/
@media only screen and (max-width: 768px) {#block-8a35675e7232b969e2b4 {margin-top: 70px; }
}

// AOP display ON MOBILE
@media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1615747953890_5133 {padding-left: 120px !important;
  padding-right: 120px !important;
  margin-top: 30px !important;}
}

/*AOP display ON desktop*/
#block-yui_3_17_2_1_1615747953890_5133 {padding-left: 70px;
padding-right: 30px;
margin-top: 0px;}

#block-yui_3_17_2_1_1615799711815_8840 {margin-top: -5px;
padding-left:30px;}

/*custom footer colour contact page*/
body#collection-601c150424a1832ec0239e4a footer#footer-sections .section-background {
    background: #40b582 !important;
}

/*custom colour projects page*/
body#collection-604fba637a9bc4009e25a639 .section-background {
    background: 	#dedfe0 !important;
}
body#collection-604fba637a9bc4009e25a639 
.item-pagination {
    background: #e6db37 !important; 
}


/*custom colour blog - lisa fashion*/
body#item-604fba637a9bc4009e25a63e .section-background {
    background: 	#e6db37!important;
}
body#item-604fba637a9bc4009e25a63e 
.item-pagination {
    background: #e6db37 !important; 
}

/*custom colour blog - lisa fashion 2*/
body#item-6050e57fc9e1850cd327af92
.section-background {
    background: #b35151 !important; 
}
body#item-6050e57fc9e1850cd327af92
.item-pagination {
    background: #b35151 !important; 
}

/*custom colour Graeme page*/
body#collection-601c2938e7535b183b4af8d6
.section-background {
    background: 	#ffffff !important;
}

/*custom footer colour making of page*/
body#collection-601c200096ac193eadea2813

.section-background {
    background: 	#e6db37 !important;
}

/*custom colour Home Page*/
body#collection-601bda7886967e11baaea002

.section-background {
    background: 	#b35151 !important;
}


/*custom stacked gallery spacing
.sqs-gallery-block-stacked .image-wrapper {
    margin-bottom: 40px;
 }*/

/*custom lightbox bg colour*/
.gallery-lightbox-background {
  background: #dedfe0 !important;  
  opacity: 0.95 !important;
}
.gallery-lightbox-control-btn
{color: black !important;
}
.gallery-lightbox-close-btn {color: black !important;
}

/*footer imprint etc font and underline*/

footer a { text-decoration: none !important; 
font-size:15px;
}

#block-yui_3_17_2_1_1615799711815_8840
{ 
line-height: 1;
}

/*custom login image in footer*/

.sqs-svg-icon--list a:nth-of-type(4) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/5ff1e158fbf14e2399f74cf7/t/605d9119a7a1e247c5fabccf/1616744729580/login_icon_temp.pngIMAGEURL);
background-size: 100%;
background-repeat: no-repeat;
}

/*hide blog post title*/
h1.blog-title {
    display: none;
}

/*3 columns for logos in Graeme page on mobile*/

@media screen and (max-width:768px) {
.gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(3,auto) !important;
}
}
/*7 columns for logos in Graeme page desktop*/
@media screen and (min-width:769px) {
.gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(7,auto) !important;
}
}
/*logo appearance on home page mobile*/

@media only screen and (max-width: 768px) {#block-5fddd4c55db265a56def
  
  {margin:30px;
  margin-top:130px;}
}

/*new about page box colour etc*/

#block-c02d6debc37321178370 
{
    background-color: rgba(255,255,255,.85);
  padding:3vw;
}

#block-yui_3_17_2_1_1617009394269_12286
{
  animation: fade 5s ease-in-out infinite !important;
}

/*hide background overflow*/
html, body {
	overflow-x: hidden;
}

 

Hi. I see no white here. Did you solve the problem?

Hi Tuanphan,

Thanks for the follow up. 

Unfortunately I haven't moved any further forward with it. The site still has a base of white that appears when my iPhone is turned to landscape as with the attached screenshot, or when scrolling through various pages and blocks reveal the white behind sometimes as well. 

It is especially distracting on the phone. 

Thanks for any further help. 

Graeme 

Experiencing same issue on iOS Safari and Chrome.

Any thoughts?

On 8/2/2021 at 5:34 AM, AllAboutDrama said:

Experiencing same issue on iOS Safari and Chrome.

Any thoughts?

Can you share link to your site?

Issue is at home page:

https://www.jorgeayala.art

On 8/6/2021 at 8:22 AM, AllAboutDrama said:

Issue is at home page:

https://www.jorgeayala.art

 

Can you take a screenshot white edge?

Hi, just like to follow up if this has been resolved. Still having the issue on my site. Any workaround?

Thanks, Graeme

On 9/30/2021 at 3:17 PM, Fordham said:

Hi, just like to follow up if this has been resolved. Still having the issue on my site. Any workaround?

Thanks, Graeme

Try adding to Design > Custom CSS

html, body {overflow-x: hidden;}

Thanks Taunphan, but unfortunately it doesn't work.

Still looking

Best, Graeme 

19 hours ago, Fordham said:

Thanks Taunphan, but unfortunately it doesn't work.

Still looking

Best, Graeme 

It looks fine to me. Can you take a screenshot on your end?

I tried this on my site and it worked perfectly. Thanks @tuanphan! I posted a question regarding collage blocks for mobile if you're able to assist. Thanks.

On 3/26/2022 at 2:33 AM, sagewylder said:

I tried this on my site and it worked perfectly. Thanks @tuanphan! I posted a question regarding collage blocks for mobile if you're able to assist. Thanks.

I answered, however I can't see your response

https://forum.squarespace.com/topic/217021-change-text-on-image-overlap-block-for-mobile-site/#comment-537995

@tuanphanI have attempted all the suggestions above and I am still unable to remove this white back ground when a phone is in landscape mode. My site: www.christianmarney.com

On 4/15/2022 at 11:39 PM, christian.marney said:

@tuanphanI have attempted all the suggestions above and I am still unable to remove this white back ground when a phone is in landscape mode. My site: www.christianmarney.com

I don't see white background on your screenshot. Can you check it again?

@tuanphan

I'm having the same issue, the error is here highlighted in red.

9 hours ago, Jleebz said:

@tuanphan

I'm having the same issue, the error is here highlighted in red.

Hi. What is site url?

The site url is joshlebowitz.com and the password is portra.

But the other sites posted in this thread also have the same issue.

5 hours ago, Jleebz said:

The site url is joshlebowitz.com and the password is portra.

But the other sites posted in this thread also have the same issue.

Which page are you referring to? I don't see it on homepage & about page?

@tuanphan This only occurs on mobile landscape orientation.

On 7/6/2022 at 9:01 AM, Jleebz said:

@tuanphan This only occurs on mobile landscape orientation.

Try adding to Design > Custom CSS

body {
	background-color: #333;
}

@tuanphan

This worked, just had to change the color code.