Jump to content

CSS disappearing on one section after I refresh page

Recommended Posts

Site URL: https://begonia-amphibian-dgb4.squarespace.com/

Hi there lovely forum people,
I added some custom css to add a frosted effect and a cutout (see image below). It worked fine until I refreshed the page, now it won't work. I have already cleared my cache and reloaded everything, but it's still not working. It's weird because the css for all of my other sections works fine even after refreshing. 
The password to view the site is: isthisthingon?

Here's the CSS I used:

#page .page-section:nth-child(12) .content-wrapper {  /*this should be 12th child, but it was originally working on 1st child for some odd reason*/
background: inherit;
background-color: rgba(255, 255, 255, .3);
backdrop-filter: blur(10px);
margin:auto!important; }

#yui_3_17_2_1_1657492918016_543.content-fill {
  clip-path: ellipse(18% 36% at 50% 50%) !important;
 }

 

Beginning to wonder if this is a spin around with my eyes closed 3 times in the moonlight while chanting situation (weird bug). 

Screen Shot 2022-07-10 at 3.47.22 PM.png

Link to comment
Quote

#yui_3_17_2_1_1657492918016_543

Selectors of this format are not stable. They are dynamically generated when the page is loaded.

You need to use stable selectors. For blocks, they start with ids like #block-blahblahblah. Others will usually have some kind of prefix like block- section- etc. Of course you can use other non id selectors to get to what you need in some cases.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

You might try something like the following.

[data-section-id="62cb44e956d495450e5bc720"] .content-wrapper {
  background: inherit;
  background-color: rgba(255,255,255,.3);
  backdrop-filter: blur(10px);
  margin: auto !important
}

#yui_3_17_2_1_1657510594842_312.content-fill {
  clip-path: ellipse(18% 36% at 50% 50%) !important;
}

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Quote

/*this should be 12th child, but it was originally working on 1st child for some odd reason*/

 

Quote

Beginning to wonder if this is a spin around with my eyes closed 3 times in the moonlight while chanting situation (weird bug). 

Which selector to use is not a bug per se but the Fluid Engine is new and you could get some weirdness with it. For instance I noticed some page sections inside of italic tags. Surely that must be an FE bug. In the Classic Editor all page sections are at the same level and could be addressed reliably.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.