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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Hi @tuanphan - I'm hoping you can please help me on this same topic that's not quite covered up above. There is a gap between my client's header (the navigation header has 1px border all around) and the first section below that I cannot get rid of. What I want to do is be able to stretch the shape on the right side of the header section all the way to the top edge of the section, but it won't let me, no matter what built-in or CSS I use to close that gap.

https://miriconsulting.squarespace.com/
pw: demo

Screenshot 2024-09-23 at 3.39.51 PM.png

Edited by jojod
Typos and further clarification
Link to comment
18 hours ago, jojod said:

Hi @tuanphan - I'm hoping you can please help me on this same topic that's not quite covered up above. There is a gap between my client's header (the navigation header has 1px border all around) and the first section below that I cannot get rid of. What I want to do is be able to stretch the shape on the right side of the header section all the way to the top edge of the section, but it won't let me, no matter what built-in or CSS I use to close that gap.

https://miriconsulting.squarespace.com/
pw: demo

Screenshot 2024-09-23 at 3.39.51 PM.png

Okay so I was able to fix this thanks to this code:
 

// HEADER NAV PADDING //
div.header-announcement-bar-wrapper {
    margin-bottom: -1.5vw !important;
}

But now I'm stumped on getting the same fix for mobile view. Please help. image.png.02e593d439d6499f8e485928d416461b.png

Link to comment
1 minute ago, jojod said:

Okay so I was able to fix this thanks to this code:
 

// HEADER NAV PADDING //
div.header-announcement-bar-wrapper {
    margin-bottom: -1.5vw !important;
}

But now I'm stumped on getting the same fix for mobile view. Please help. image.png.02e593d439d6499f8e485928d416461b.png

Through trial and error using the mobile view code (see below), I got this fixed for mobile, too, yay. Proud of myself for navigating this battling myself lol.

@media screen and (max-width: 960px){
  div.header-announcement-bar-wrapper 
  {
    margin-bottom: -4.5vw !important;
}
}

@tuanphan it truly has been thanks to all the free knowledge you provide in this forum, thank you.

Link to comment
  • 1 month later...

Hello @tuanphan,

As you seem to be the master of padding problems, I am hoping that you can help me with padding issues in my header and footer.

I don't want things to be too squashed - I like white space.

HOME PAGE, SHOP LANDING PAGE AND ALL SITE PAGES INCLUDING PRODUCT PAGES

BOTTOM OF PAGE/FOOTER:

The padding between the page content and social icon needs to reduce by half.

The padding between the social icon and footer navigtion and text line needs to reduce so they look like they are part of the same content block or close to being the same content block.

STANDARD WEBSITE PAGES ONLY (i.e. about, shipping etc.)

HEADER:

Padding between the website title and the page title  needs to be reduced by half on the standard pages. It is perfect on the home page and shop landing page on the mobile version.

PRODUCT PAGES ONLY

HEADER:

Padding between the website title and the breadcrumbs needs to be reduced by half on the product pages. It is perfect on the home page and shop landing page on the mobile version.


My site is live and you can see the issue on the home page:
https://omenprojects.com/

Shop landing page:
https://omenprojects.com/shop

Product page: 
https://omenprojects.com/shop/p/rectangle-wallet

Standard page:
https://omenprojects.com/shipping

I will also attach marked up screenshots. Red denotes area where padding needs t be reduced by 50% or more (social media icon and footer nav and text).

Very grateful for any help you can provide. Thank you for considering my issue. 

Best,
Holly

Home page - footer padding needs to be reduced by half.jpg

Product page - footer padding needs to be reduced by half.jpg

Product page - header padding needs to be reduced by half.jpg

Standard page - header padding needs to be reduced by half.jpg

Standard page - footer padding needs to be reduced by half.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.