Removing blank spaces between page sections on Index Pages

Hi, 

This is my first time using the forum so hope I'm doing this right.. I am creating a site with index pages and there appears to be an excess of blank space between each page section within the index page. Does anyone know how I can decrease it?  

It depends upon the template you are using.. Can you share the template name and also a url to the site?

Hi Colin, 

The template is Hadyn. Is it possible for me to send the url even though the site isn't live yet? Thanks for your help! 

1 minute ago, natasha2 said:

Is it possible for me to send the url even though the site isn't live yet? 

It is. 

Go to Settings > Site Visibility > Password Protected and add a password

Then share the url and password here. 

password neonrockssite555

URL neon-rocks.squarespace.com

The default section padding is 96px at the top and bottom.

Insert this into your custom css and then tweak the @sectionpadding pixel value until you get the layout you prefer. 

@sectionpadding: 10px;

.index-section .index-section-wrapper.page-content {
	padding-top: @sectionpadding;
	padding-bottom: @sectionpadding;
}

Thank you that's amazing!

I'm trying to get the blue to match up between index pages without the banner image showing between sections - I set the padding to 0 and it worked great on desktop but on mobile I'm still having a gap between - any ideas? Using Brine.

capybera-pigeon-wkpt.squarespace.com

PW: shine

On 10/16/2019 at 2:17 PM, colin.irwin said:

The default section padding is 96px at the top and bottom.

Insert this into your custom css and then tweak the @sectionpadding pixel value until you get the layout you prefer. 

@sectionpadding: 10px;

.index-section .index-section-wrapper.page-content {
	padding-top: @sectionpadding;
	padding-bottom: @sectionpadding;
}

 

Hi, I used this code but I want to adjust the padding of my first section only.

Can you help?

Thanks in Advance.

On 10/16/2019 at 2:17 PM, colin.irwin said:

The default section padding is 96px at the top and bottom.

Insert this into your custom css and then tweak the @sectionpadding pixel value until you get the layout you prefer. 

@sectionpadding: 10px;

.index-section .index-section-wrapper.page-content {
	padding-top: @sectionpadding;
	padding-bottom: @sectionpadding;
}

 

 Hi, @colin.irwin  I used this code but I want to adjust the padding of my first section only.

Can you help?

Thanks in Advance.

8 minutes ago, Asiya said:

 Hi, @colin.irwin  I used this code but I want to adjust the padding of my first section only.

Can you help?

Thanks in Advance.

Try this

@sectionpadding: 10px;

.index-section:first-of-type .index-section-wrapper.page-content {
	padding-top: @sectionpadding;
	padding-bottom: @sectionpadding;
}

8 minutes ago, colin.irwin said:

17 minutes ago, Asiya said:

 

Try this

@sectionpadding: 10px;

.index-section:first-of-type .index-section-wrapper.page-content {
	padding-top: @sectionpadding;
	padding-bottom: @sectionpadding;
}

Hi there's still alot of padding although I changed it to zero.

Can you post a link to the page in question?

13 minutes ago, colin.irwin said:

Can you post a link to the page in question?

Yes sure.

Hi @colin.irwin, I am trying to remove the side padding completely on one specific index page on a site page. Could I use a similar code? Can you tell me what the proper code for this would be? Thanks! 

10 hours ago, Novice_Rebs said:

Hi @colin.irwin, I am trying to remove the side padding completely on one specific index page on a site page. Could I use a similar code? Can you tell me what the proper code for this would be? Thanks! 

Can you share link to index page? We can help easier

So I tried your first code and it worked but for the whole website. I'd like to do it only between the sections of this page https://www.leep4impact.org/partners-2. I tried putting a rule before the code (i.e #name of page followed by your code and 2x this symbol '}}' at the end because it said it was missing) But then nothing happened.

On 11/26/2021 at 10:24 PM, SalmaMaged said:

So I tried your first code and it worked but for the whole website. I'd like to do it only between the sections of this page https://www.leep4impact.org/partners-2. I tried putting a rule before the code (i.e #name of page followed by your code and 2x this symbol '}}' at the end because it said it was missing) But then nothing happened.

You want to remove this space?

yes, exactly. But I just realized I had linked a wrong page name! So when i fixed that it worked. Thank you very much!!

So what code did you use to get it to work on that specific url? Where in the code did you insert it? I am having the same issue with the extra padding between sections. 

On 1/15/2022 at 11:27 AM, mrooney said:

So what code did you use to get it to work on that specific url? Where in the code did you insert it? I am having the same issue with the extra padding between sections. 

Can you share link to your site? Each template will need a different solution

Thanks for this. I just had this same issue and tried the code but the gap has not reduced. I'm not sure what I've done wrong. This is my page and I'm using V7.0 Brine.

https://www.louisedemasi.com/online-classes

Can anyone suggest what I'm doing wrong?

On 4/13/2023 at 8:34 AM, DomDom282 said:

Thanks for this. I just had this same issue and tried the code but the gap has not reduced. I'm not sure what I've done wrong. This is my page and I'm using V7.0 Brine.

https://www.louisedemasi.com/online-classes

Can anyone suggest what I'm doing wrong?

 

The page looks fine. Can you take a screenshot of gap?