RShin

Just wanted to let you know that Tuan helped me fix it by adding #page to the CSS line. Thank you for the replies though!

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

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

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?

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!!!!

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!

I was able to fix the icons myself, but the background color is still tan. How can I change it to white and footer to purple like the desktop? (I tried to change the color scheme and it messed up the formatting of my store plug in. So I changed the colors on the theme that works, but it's still showing tan.) Working with Lightspeed/ecwid has proved tricky unfortunately

The colors on my mobile site are not matching the desktop. Is there a way to also change the background color of the mobile hamburger menu? The icons are also incorrect on the mobile menu. The shopping cart and account are switched, and the icons are not correct. Any way to fix these things? I used some custom code from Tuan for the desktop page but it looks like it didn't translate to mobile. https://fiddle-drum-m9ds.squarespace.com/

My mobile site is not matching the color themes of my desktop site. https://fiddle-drum-m9ds.squarespace.com/ Also, how do I change the color of the mobile menu? And the shopping cart icon is not linking on the mobile menu. I'd like the mobile menu to also have the account icon instead of the link icon. I used some custom CSS by Tuan. Thank you!

Same....

Also font problems, sigh. Site is at https://fiddle-drum-m9ds.squarespace.com/ // 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';} h2 { font-family: 'd-din-pro';} h3 { font-family: 'din-condensed';} h4 { font-family: 'd-din-pro';} .sqsrte-large { font-family: 'd-din-pro';} p { font-family: 'd-din-pro';} .sqsrte-small { font-family: 'd-din-pro';} //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; } }

Firstly, I don't recommend integrating lightspeed/ecwid e-commerce to SS. It's kind of a huge design pain. The mobile view on my phone doesn't look like the mobile preview on the site. I've had to add a ton of custom CSS on both SS and Lightspeed to get this presentable. Also, I can't seem to figure out how to get all the fonts into din-pro. Only some of it was affected by the css... Site here. Help is extremely appreciated!