Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 5
  • Views 6.6k
  • Created
  • Last Reply

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
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 🙂

Link to comment
  • 7 months later...

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.

Link to comment
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 10 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.