Jump to content

How to isolate padding adjustments Homepage vs. Pages (Bedford)

Recommended Posts

Site URL: https://ray-primrose-34c4.squarespace.com/

Hi All,

Working on some customizations for a client's site and I've adjusted page padding using this:

#page>{
    max-width: 1020px !important; // 1020px is the default size
    padding: 150px 32px !important;  // First number is top & bottom, second is left & right  Defaults are 96px and 32px
}

Unfortunately this also affects the homepage (the only page with a banner image) and adds too much negative space below the image and the first text on the page. Is there a code snippet to add to prevent the homepage from being affected? Or is the best way around this to only apply the page code to every single other page via a #collection tag? Very novice at Custom CSS, sorry.

Thank you!

password: testview2022

Link to comment
On 9/13/2022 at 12:07 AM, Flynn said:

Site URL: https://ray-primrose-34c4.squarespace.com/

Hi All,

Working on some customizations for a client's site and I've adjusted page padding using this:

#page>{
    max-width: 1020px !important; // 1020px is the default size
    padding: 150px 32px !important;  // First number is top & bottom, second is left & right  Defaults are 96px and 32px
}

Unfortunately this also affects the homepage (the only page with a banner image) and adds too much negative space below the image and the first text on the page. Is there a code snippet to add to prevent the homepage from being affected? Or is the best way around this to only apply the page code to every single other page via a #collection tag? Very novice at Custom CSS, sorry.

Thank you!

password: testview2022

Do you mean applying code for all page except the home page?

Try the following code

body:not(#collection-62acb1ba80be5838a59121c6) #page {
  max-width: 1020px !important;
  padding: 150px 32px !important;
}

#collection-62acb1ba80be5838a59121c6 is the PageId of Home Page that you can get via the following extension: Squarespace ID Finder

Hope it can help

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 9/22/2022 at 1:07 AM, Flynn said:

Thanks for responding! That is what I'm meaning to achieve. Site-wide style changes except for the homepage. I didn't notice any change using your solution unfortunately. Any other ideas?

-Flynn

You mean. You want your code, doesn't run on homepage? This code

#page>{
    max-width: 1020px !important; // 1020px is the default size
    padding: 150px 32px !important;  // First number is top & bottom, second is left & right  Defaults are 96px and 32px
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hey @tuanphan,

Sorry for the confusion. I actually do NOT want this code to run on the homepage. I want the code to work everywhere on the site EXCEPT the homepage. Because I have a banner image on the homepage the text padding adjustment I made is affects that page differently than the rest of the site and I don't like it. There's too much negative space below the banner image and the text. Ideally there's a way to isolate the homepage instead of applying the code to each collection individually since I'll have many pages.

Thanks in advance!

Link to comment
13 hours ago, Flynn said:

Hey @tuanphan,

Sorry for the confusion. I actually do NOT want this code to run on the homepage. I want the code to work everywhere on the site EXCEPT the homepage. Because I have a banner image on the homepage the text padding adjustment I made is affects that page differently than the rest of the site and I don't like it. There's too much negative space below the banner image and the text. Ideally there's a way to isolate the homepage instead of applying the code to each collection individually since I'll have many pages.

Thanks in advance!

Try edit it to this

body:not(.homepage) #page>{
    max-width: 1020px !important; 
    padding: 150px 32px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.