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.