Jump to content

white edges on mobile landscape viewing

Recommended Posts

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 

IMG_8690.PNG

Link to comment
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)?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 

 

IMG_8768.PNG

Link to comment
  • 3 months later...
  • 1 month later...
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;}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 5 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
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

IMG_0403.PNG

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.