Jump to content

Reduce Padding in Between Sections

Recommended Posts

I noticed there is quite a bit of padding in between sections that creates a ton of white space and emptiness. How can I reduce the padding in between all sections to make for a seamless website?

This is for my web portfolio showcasing designs and project details. I've been experiencing difficulty fitting slideshows, simple images, and plain text boxes without too much padding in between sections. Thank you!

Edited by mpnguyen99
Grammar
Link to comment

Add to Design > Custom CSS

#page section .content-wrapper {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
On 2/3/2021 at 1:32 AM, tuanphan said:

Add to Design > Custom CSS

#page section .content-wrapper {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

 

Hi Tuanphan, this code worked for me, but it is giving me trouble for sections where I use an inset section background. 

Here is an example:

I'd like to reduce the white space between these two color blocks (pictured below).

32045930_ScreenShot2021-07-24at9_24_45AM.thumb.png.bd094152cc3bdf0a1a19ab84f34b7f86.pngHowever, when I use the code you provided, it reduces the padding between the content within the color blocks and the top/bottom edge of the color block, but it does not reduce the white space between the two color blocks (see second screenshot, below). 

1078269804_ScreenShot2021-07-24at9_25_09AM.thumb.png.644f1efe949c21121f24f639653a4ea1.png

I'd like to keep the padding between the content within the color blocks and the top/bottom edge of the color blocks, and only reduce the white space between the color blocks. Could you help with this?

Thank you!

Link to comment
18 hours ago, m00s said:

Hi Tuanphan, this code worked for me, but it is giving me trouble for sections where I use an inset section background. 

Here is an example:

I'd like to reduce the white space between these two color blocks (pictured below).

32045930_ScreenShot2021-07-24at9_24_45AM.thumb.png.bd094152cc3bdf0a1a19ab84f34b7f86.pngHowever, when I use the code you provided, it reduces the padding between the content within the color blocks and the top/bottom edge of the color block, but it does not reduce the white space between the two color blocks (see second screenshot, below). 

1078269804_ScreenShot2021-07-24at9_25_09AM.thumb.png.644f1efe949c21121f24f639653a4ea1.png

I'd like to keep the padding between the content within the color blocks and the top/bottom edge of the color blocks, and only reduce the white space between the color blocks. Could you help with this?

Thank you!

Can you share link to page where you want to reduce padding? We can tweak the code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
  • 1 year later...

Hi,

I have a similar question.

I have a product section below another section with the title for the products in it. The reason I've put the title in another section is because I have styles on the title text (the green underlines) that I can't create within the product title as I don't know how to get that style in CSS.

I want to reduce the top padding of the product section below so it is closer to the title section[data-section-id="6448e8b39f1d256fe08dc494"]

The site is live https://www.decisionspelling.com/. I just want to tweak this gap.

Thanks!

 

Screenshot 2023-06-07 at 11.56.04.png

Screenshot-2023-06-07-at-11.56.48.jpg

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.