Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 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

4 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.


If a response helped you out, send a 'Like' 👍 (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
  • 0

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.

Share this post


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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

I'm overloading. Will reply all questions this month.

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