Jump to content

Custom CSS not loading

Recommended Posts

My custom CSS is not working properly. When I am in edit mode, the CSS works. However, when I leave it and log into the website not logged in, the CSS does not work anymore.

For my page, I have an text overlay with a grey background and centered text over the image that is hidden over the image.
When the user hovers over the image, the text overlay appears. This is only on desktop size screens. On mobile size screens,
the overlay is hidden completely. The hidden overlay works on mobile size. However the hover effect does not work on desktop size. I removed all comments in my code and have removed most of the elements from the code snippet below:

/* On desktop size screen make text overlay transparent*/
@media only screen and (min-width: 768px) {
  #block-35f9b9b2a05d03b910bd,
  #block-e382993ec5272d55f805,
  /* removed rest of ids */  
  {
    opacity: 0;
    transition: opacity 1s;
  }
 
 /* Show overlay on on user hover over image*/
  #block-35f9b9b2a05d03b910bd:hover,
  #block-e382993ec5272d55f805:hover,
 /* removed rest of ids */
 {
    opacity: 1;
    transition: opacity 1s;
  }
}

/* On mobile hide text overlay */
@media only screen and (max-width: 767px) {
  #block-35f9b9b2a05d03b910bd,
  #block-e382993ec5272d55f80,
  /* removed rest of ids */
  {
    display: none;
  }
}

I can show my full code for more context, but the desired effect works in edit mode.

Link to comment
  • Replies 3
  • Views 984
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

You have unnecessary commas after the last block IDs, might not make a difference but worth fixing:

/* On desktop size screen make text overlay transparent*/
@media only screen and (min-width: 768px) {
  #block-35f9b9b2a05d03b910bd,
  #block-e382993ec5272d55f805
  /* removed rest of ids */  
  {
    opacity: 0;
    transition: opacity 1s;
  }
 
 /* Show overlay on on user hover over image*/
  #block-35f9b9b2a05d03b910bd:hover,
  #block-e382993ec5272d55f805:hover
 /* removed rest of ids */
 {
    opacity: 1;
    transition: opacity 1s;
  }
}

/* On mobile hide text overlay */
@media only screen and (max-width: 767px) {
  #block-35f9b9b2a05d03b910bd,
  #block-e382993ec5272d55f80
  /* removed rest of ids */
  {
    display: none;
  }
}

 

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
Posted (edited)

Thanks, this is corrected on the actual CSS I am running on the site. However, still not running outside of edit mode. When I check the css on the dev console, there is strikethrough on the css rules I applied. This might be specificity issue that is occuring.

Screenshot 2024-03-01 230025.png

Screenshot 2024-03-01 230034.png

Edited by anako
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.