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

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!

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

Gotcha! I filled it in when I posted, but not sure where it went. The color issue is on all pages on mobile. https://fiddle-drum-m9ds.squarespace.com/

The Blog issue is here, also only on mobile https://fiddle-drum-m9ds.squarespace.com/news

Thank you!!!!

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;
}}

Hmmm....I didn't put that line in the code injection. No idea where it's coming from. Could it be coming from somewhere else?

Have you checked in Custom CSS?

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 

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.

Yeah it was just a copy paste error on my part. Code is correct on the page. I'm not seeing any extra lines in any of those places. I'm using a third party plug in. I wonder if that's causing issues. But I don't know why it would be affecting the background color

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.