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

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

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

Hi @bangank36

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

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
}

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!

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;
}

Hi @tuanphan,

I think that worked! Thank you!

Also, @bangank36 I think I made an error using your solution, I believe targeting the specific collection would have worked too. Thank you!