How to adjust and reduce banner padding on a single page only?

Hey you all!

I'm pretty new to SS, so bare with me.

I'm trying to reduce the spacing between the video and banner of the index page. It's the black block/banner here on my site to my site www.drpodcasts.com

I've tried this code I found here on these forms, but it didn't work:

<style>

#page {

padding-top; 30px;

padding-bottom: 0px;

}

</style>

Basically, I want to shorten the size of the banner page so the video is nearly flushed with the video.

I know I could do this by going to Design>Styles>INDEX:PAGE>Padding (Overlay Pages), but this affects every index page. I want this type of padding adjustment, but to ONLY affect the index page of where my video is.

I've also attached a screenshot of what I'm trying to achieve.

Hopefully that makes sense and hopefully someone can help me with this!

Thank you!

The answer is to add CSS via the CSS Editor in order override your general setting for just that section. It's quite simple, but it does require some understanding of how Squarespace generates the underlying code for index sections such as that. Simply put, in your template, Squarespace creates a "section" element for each index page you create, and gives the section an "id" attribute based on the URL you assign to the page. Taking that all together, we have:

section#video .Index-page-content {
  padding-top: 20px;
  padding-bottom: 20px;
}

Insert that via the CSS Editor and adjust to your liking.

Note that you have a couple spacer blocks at the top of that section that you'll want to remove if you really want to close that gap.

In the future, if you want to look into how this code is generated, get comfortable using your browsers developer tools and poking around with the inspector.

Do let me know how this works for you.

On 10/9/2019 at 7:49 PM, brandon said:

The answer is to add CSS via the CSS Editor in order override your general setting for just that section. It's quite simple, but it does require some understanding of how Squarespace generates the underlying code for index sections such as that. Simply put, in your template, Squarespace creates a "section" element for each index page you create, and gives the section an "id" attribute based on the URL you assign to the page. Taking that all together, we have:

section#video .Index-page-content {
  padding-top: 20px;
  padding-bottom: 20px;
}

Insert that via the CSS Editor and adjust to your liking.

Note that you have a couple spacer blocks at the top of that section that you'll want to remove if you really want to close that gap.

In the future, if you want to look into how this code is generated, get comfortable using your browsers developer tools and poking around with the inspector.

Do let me know how this works for you.

Omg you're a life safe! Thank you so much! This worked 🙂

Hey Brandon, I wanted to follow up on this thread after finding it while looking for the same solution.   I am using the Bryler template and I'd like to make the first page under my main index have a smaller top and bottom margin than the rest of the pages.

I saw the code you listed above...

section#video .Index-page-content {
  padding-top: 20px;
  padding-bottom: 20px;
}

I believe I am miss-labeling the pages, since I can not get the code to work for me

Let's say I have a "Welcome" Index page, and the first page of that index is called "Home".  How do I properly assign those section/page names within your code?

I tried using "welcome#home" and the reverse of that, but nothing is working.  Hopefully you can easily clear it up for a novice.

On 5/22/2020 at 4:58 AM, 3ric said:

Hey Brandon, I wanted to follow up on this thread after finding it while looking for the same solution.   I am using the Bryler template and I'd like to make the first page under my main index have a smaller top and bottom margin than the rest of the pages.

I saw the code you listed above...

section#video .Index-page-content {
  padding-top: 20px;
  padding-bottom: 20px;
}

I believe I am miss-labeling the pages, since I can not get the code to work for me

Let's say I have a "Welcome" Index page, and the first page of that index is called "Home".  How do I properly assign those section/page names within your code?

I tried using "welcome#home" and the reverse of that, but nothing is working.  Hopefully you can easily clear it up for a novice.

If you share link to page, I can take a look

On 5/25/2020 at 6:15 AM, tuanphan said:

If you share link to page, I can take a look

I gave this code a try and it's working for the top padding only. Any ideas?

http://www.southernsunevents.com

PW: sse2020

Using it to try to reduce the padding on the second section (sse-summary). I don't have any extra spacer blocks so I'm not sure what I can do.