Jump to content

CSS for just one section ID not working?

Go to solution Solved by Beyondspace,

Recommended Posts

Clearly I'm making some sort of mistake here, but in Design > Custom CSS I'm finding that the following is applying globally to the entire site, rather than just one section on the homepage. The ID is correct.

What's my mistake, please?

#block-yui_3_17_2_1_1605803997792_3851, .Main-content {
padding-top:0px;
padding-left:0px;
padding-right:0px !important;
width:100%;
  }

 

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

9 minutes ago, willnphoto said:

Clearly I'm making some sort of mistake here, but in Design > Custom CSS I'm finding that the following is applying globally to the entire site, rather than just one section on the homepage. The ID is correct.

What's my mistake, please?

#block-yui_3_17_2_1_1605803997792_3851, .Main-content {
padding-top:0px;
padding-left:0px;
padding-right:0px !important;
width:100%;
  }

 

The above code is selecting multi elements: the #blockid and the element entire your site with class .Main-content. Is it the right one you want to apply? 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
Just now, bangank36 said:

The above code is selecting multi elements: the #blockid and the element entire your site with class .Main-content. Is it the right one you want to apply? 

We want to select that class but within the section ID only. Is that possible? 

Link to comment
  • Solution

You can use this extension: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

to find the right id for section/page

Try the following rule to select the class within a section/page

#sectionID (or #PageID) .class {
  /*Your specific style*/
}

Hope it help

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Reference to select right element for styling: https://www.w3schools.com/cssref/css_selectors.asp

image.thumb.png.25d12846cb0892396c3c03d11b5940ba.png

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
4 minutes ago, bangank36 said:

You can use this extension: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

to find the right id for section/page

Try the following rule to select the class within a section/page

#sectionID (or #PageID) .class {
  /*Your specific style*/
}

Hope it help

For some reason, when I remove the comma between ID and class the change it should apply no longer works. I tried changing block ID for the page (collection) ID and it makes no difference. It seems the design change only works with the comma...

Link to comment
40 minutes ago, willnphoto said:

For some reason, when I remove the comma between ID and class the change it should apply no longer works. I tried changing block ID for the page (collection) ID and it makes no difference. It seems the design change only works with the comma...

We've sorted it - thanks!

Link to comment
39 minutes ago, willnphoto said:

For some reason, when I remove the comma between ID and class the change it should apply no longer works. I tried changing block ID for the page (collection) ID and it makes no difference. It seems the design change only works with the comma...

Removing comma means that you select the class .Main-content within the block id so it won't work at all

Using

#pageId .Main-content {
  /*style*/
}

should help (have a space between pageid and class)

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.