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

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


romerodan
Go to solution Solved by brandon,

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

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 und

Posted Images

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)

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 🙂

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.

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 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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