Jump to content

Mobile background color is different & Text is jumbled on Blog pages

Go to solution Solved by RShin,

Recommended Posts

Hi there. When I view the site on mobile, the background is Tan in color. However, on desktop and on mobile preview on SS, it is white like it should be. I've tried global Body tags in the custom CSS with !important and a theme color in the header. Anything else I can try?

Also the News (blog) section has the title jumbled on mobile. How can I fix this? Thank you!

Edited by RShin
Link to comment

Can you share your website URL and the pages that have these problems.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You have some CSS or code injection that looks like this that is causing the tan colour to appear:

@media screen and (max-device-width: 900px) {
div.section-background {
    background-color: #fff6ed !important;
}}

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Have you checked in Custom CSS?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Yes. I just have the below with an addendum on the bottom

body{
  background-color:#ffffff;
}

// CUSTOM FONT
@font-face {
font-family: 'd-din-pro';
       src: url('https://static1.squarespace.com/static/64aedc5fd4f41012a9a6897f/t/64b5591bb7294e5e0e7be4d9/1689606427346/D-DIN-PRO-400-Regular.otf');
}
@font-face {
font-family: 'd-din-pro-bold';
       src: url('https://static1.squarespace.com/static/64aedc5fd4f41012a9a6897f/t/64b559221484773364f6265f/1689606434717/D-DIN-PRO-700-Bold.otf');
}
 
h1 {
font-family: 'd-din-pro' !important;}

h2 {
font-family: 'd-din-pro' !important;}

h3 {
font-family: 'din-condensed' !important;}

h4 {
font-family: 'd-din-pro' !important;}

.sqsrte-large {
font-family: 'd-din-pro' !important;}

p {
font-family: 'd-din-pro' !important;}

.sqsrte-small {

font-family: 'd-din-pro' !important;}

//hide cart and profile icons in footer
.sqs-svg-icon--list a:nth-of-type(1) {
  svg {      
    display:none;   
  }   
   
}
.sqs-svg-icon--list a:nth-of-type(2) {
  svg {      
    display:none;   
  }   
   
}
// desktop
@media only screen and (min-width:640px) { 
  //hide fb & insta icons in header
  .header-actions-action--social .icon--fill:nth-of-type(3) {
    svg {
      display:none;
    }  
  }
  .header-actions-action--social .icon--fill:nth-of-type(4) {
    svg {
      display:none;
    }  
  }
  //icon for profile
  .header-actions-action--social .icon--fill:nth-of-type(1) {
    svg {
      display:none;
    }    
    background-image: url('https://static1.squarespace.com/static/64aedc5fd4f41012a9a6897f/t/64b5a20799a4dd6460bc52cd/1689625095122/Screenshot+2023-07-17+at+4.17.50+PM.png');    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
  // cart icon
   .header-actions-action--social .icon--fill:nth-of-type(2) {
    svg {
      display:none;
    }    
    background-image: url('https://icons.veryicon.com/png/o/miscellaneous/jd-app-icon/shopping-cart-296.png');    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}  
.header-menu-actions-action:nth-of-type(1) {    
  svg { 
    display:none;    
  }    
  background-image: url('https://icons.veryicon.com/png/o/miscellaneous/jd-app-icon/shopping-cart-296.png');    
  background-size: 100%;    
  background-repeat: no-repeat;  
}

/* Icons to right */
.header-display-desktop {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.header-actions.header-actions--left {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

/*mobile hamburger icons*/
@media only screen and (min-width: 640px) {
    .icon--fill:nth-of-type(2) {
        background-image:url(https://icons.veryicon.com/png/o/miscellaneous/jd-app-icon/shopping-cart-296.png);
        background-size: 100%;
        background-repeat: no-repeat
    }

    .icon--fill:nth-of-type(2) svg {
        display: none
    }
}

.header-menu-actions-action:nth-of-type(2) {
    background-image: url(https://icons.veryicon.com/png/o/miscellaneous/jd-app-icon/shopping-cart-296.png);
    background-size: 100%;
    background-repeat: no-repeat
      
}
.header-menu-actions-action:nth-of-type(2) svg {
    display: none
}
@media only screen and (min-width: 640px) {
    .icon--fill:nth-of-type(2) {
        background-image:url(https://icons.veryicon.com/png/o/miscellaneous/jd-app-icon/shopping-cart-296.png);
        background-size: 100%;
        background-repeat: no-repeat
    }

    .icon--fill:nth-of-type(2) svg {
        display: none
    }
}

.header-menu-actions-action:nth-of-type(2) {
    background-image: url(https://icons.veryicon.com/png/o/miscellaneous/jd-app-icon/shopping-cart-296.png);
    background-size: 100%;
    background-repeat: no-repeat
      
}
.header-menu-actions-action:nth-of-type(2) svg {
    display: none
}


@media only screen and (min-width: 640px) {
    .icon--fill:nth-of-type(1) {
        background-image:url(https://static1.squarespace.com/static/64aedc5fd4f41012a9a6897f/t/64b5a20799a4dd6460bc52cd/1689625095122/Screenshot+2023-07-17+at+4.17.50+PM.png);
        background-size: 100%;
        background-repeat: no-repeat
    }

    .icon--fill:nth-of-type(1) svg {
        display: none
    }
}

.header-menu-actions-action:nth-of-type(1) {
    background-image: url(https://static1.squarespace.com/static/64aedc5fd4f41012a9a6897f/t/64b5a20799a4dd6460bc52cd/1689625095122/Screenshot+2023-07-17+at+4.17.50+PM.png);
    background-size: 100%;
    background-repeat: no-repeat
      
}
.header-menu-actions-action:nth-of-type(1) svg {
    display: none
}

//footer color
footer.sections .section-background {
    background-color: #e8e1fd !important;
}

div.section-background {
    background-color: #ffffff 

Link to comment

There are 4 places to check, it doesn't look like it in Custom CSS, the second place is the global Code Injection, the third is in each page settings - Advanced - Header Code Injection, the final place could be on the page in a Code Block.

If it's not there, I'm not sure what to tell you, I can see the CSS on the website so it must be somewhere.

As a note that may mean nothing as it's probably a copy paste "error"; at the end of the CSS you posted here, you are missing a closing bracket, these type of syntax errors can cause problems.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
22 minutes ago, RShin said:

I wonder if that's causing issues. But I don't know why it would be affecting the background color

I might be, but I'm not able to shed any more light from the info I have.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.