Jump to content

Removing blank spaces between page sections on Index Pages

Recommended Posts

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. 

Edited by colin.irwin

If you're looking for a Squarespace Developer, drop me a line
Also, you might want to check out my Squarespace template finder

Link to comment

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;
}

 

If you're looking for a Squarespace Developer, drop me a line
Also, you might want to check out my Squarespace template finder

Link to comment
  • 6 months later...

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

 

Link to comment
  • 3 months later...
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.

 

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

Edited by Asiya
Link to comment
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;
}

 

 

If you're looking for a Squarespace Developer, drop me a line
Also, you might want to check out my Squarespace template finder

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

 

Link to comment
  • 11 months later...
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

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
  • 3 months later...
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?

image.thumb.png.c84468580942a5088cbc65356684a1a3.png

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
  • 1 month later...
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

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
  • 1 year later...
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?

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

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