Jump to content

Custom background colour attached to rows /columns not showing on live site

Recommended Posts

Hello,

I have added custom css to apply background colours to the .sqs-row elements and they are showing up on the edit mode but aren't showing on the site if I go on the no redirect site preview here password hdfitness. I have used this mainly for the footer backgrounds using code like this:

@media @mobile {
  section[data-section-id="6530ce72dd783f77621fc8a1"] .sqs-layout > .sqs-row > .sqs-col-12 > .sqs-row:nth-child( 3 )  {
    background: black !important;
  }
}

But it is also happening to styles applied to columns or rows on the Memberships and HD Online page, example css:

@media only screen and (max-width: 767px)
<style>
[data-current-styles*='"customSectionHeight": 37'] .sqs-col-3 {
    border: 1.5px solid #eb51c0;
    border-radius: 10px;
    margin: 6px;
    flex: 1 1 150px;
    box-sizing: border-box;
    padding: 50px 10px;
    display: flex;
    flex-direction: column;}

I have attached photos of how it is showing on the edit mode, all these borders and backgrounds are missing on live mode.

Any help would be much appreciated! Thank you

Screenshot 2023-12-05 at 3.43.53 pm.png

Screenshot 2023-12-05 at 3.44.44 pm.png

Screenshot 2023-12-05 at 3.44.58 pm.png

Screenshot 2023-12-05 at 3.48.22 pm.png

Link to comment

Can you share your website URL and this page?

This may not solve it, but you do seem to have a problem in part of your CSS. You have a <style> tag which is HTML and not appropriate to use in Custom CSS and you are missing a set of brackets to apply the media query to the code below it. Remove the <style> and add the two curly brackets as suggested below. 

image.png.2af94768bb054bd9e430f24828c36c75.png

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

Are you using the fluid engine grid editor or the classic editor?

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.