Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • 0
romerodan

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

Question

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!

 

Screen Shot 2019-10-09 at 6.21.05 PM.png

Screen Shot 2019-10-09 at 6.20.47 PM.png

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 1

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.

romerodan, rodvaldr and tuanphan like this

If a response helped you out, show some love by 'Like' like.jpg.6f2856e82374ca8b5041fff9ee27eef4.jpg (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left).

Share this post


Link to post
  • 0
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 🙂

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...