Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Decreasing Section Padding Squarespace 7.1


Recommended Posts

I am using Squarespace 7.1 and need to remove vertical padding from sections - i.e. where sections join other sections. I imagine I'm not the only one thinking there is too much white space as a default and I can't find a way to remove it. 

Any ideas? I'm a new squarespace user and unfamiliar with custom css but will go down that road if needed. 

Thanks!

Link to post
  • Replies 84
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

There is a min-height of 33vh set on sections. You need to override that to get the sections smaller.  For all sections this would be: .page-section { min-height: 0 !important; } For a s

Try this [data-section-id="5e8f4059a780b645bb8468ac"] { min-height: 10vh !important; } [data-section-id="5e8f4059a780b645bb8468ac"] .content-wrapper { padding-top: 2px !important; padd

Try adding to Home > Design > Custom CSS [data-section-id="5f04d975f0c05b44f5ad5b51"] { padding-top: 1px !important; }  

Posted Images

First click on the little pencil to edit the block...

115366628_Screenshot2019-10-14at20_11_28.thumb.png.7373c8bd21152e6d63251e1588e82443.png

Then use the section height tool to adjust the section height....

1010675693_Screenshot2019-10-14at20_11_43.thumb.png.7d1a9c975a294a63f154a1ef588db507.png

I hope this helps.

Steven Scott - Creative Partner
TwoFifths Design Ltd.

59 Fifth Street
Newtongrange
Edinburgh
EH22 4PJ

T: 0131 663 6047
M: 07925 950 031
E: hello@twofifthsdesign.com

www.twofifthsdesign.com

 

Link to post

Thank you both for taking the time to try to help me. Unfortunately I can't share the site link yet as it is password protected and I don't have permission from the organisation it is for. I tried to adjust the section height to go as small as possible but there is still too much white space for my liking. I am using for the home page text overlaid on a background image, followed by a section containing blog posts displayed as a carousel, followed by a footer. I want to reduce the white space between the carousel and the image (on top) and footer (on bottom).  I'll keep playing around with this:) Thanks again. 

Link to post

There is a min-height of 33vh set on sections. You need to override that to get the sections smaller. 

For all sections this would be:

.page-section {
    min-height: 0 !important;
}

For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.

Somethig like this:

.page-section[data-section-id="5d979fd8590a832f3c411579"] {
    min-height: 0 !important;
}

 

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Link to post
  • 3 months later...

Hi Colin, 

This CSS isn't working on my site. I've DM'd you details.

Does is have something to do with "MagicPaddingController"?

Any ideas on what else I can try? Thank you 🙂
 

Edited by MegD
Link to post
  • 2 months later...

I am having the same problem. The CSS isn't working for me and when I inspect the page, I also have "MagicPaddingController. Can anyone help? I am trying to reduce the padding on all gallery sections.

Link to post
12 hours ago, mpuls1 said:

I am having the same problem. The CSS isn't working for me and when I inspect the page, I also have "MagicPaddingController. Can anyone help? I am trying to reduce the padding on all gallery sections.

Use CSS

[data-section-id="enter section id here"] .content-wrapper {padding-top: 5px; padding-bottom: 5px;}

Each section has different ID. If you share link to your site, I can take a look

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
On 4/4/2020 at 4:11 AM, tuanphan said:

Use CSS

[data-section-id="enter section id here"] .content-wrapper {padding-top: 5px; padding-bottom: 5px;}

Each section has different ID. If you share link to your site, I can take a look

@tuanphan I am brand new to coding and website-building. Could you take a peek at the website I am working on? I am trying to make a very short block at the footer of every page for the copyright notice, but I haven't gotten anything to work yet.

Website: vdlbuilders.com / password: preview

I believe the block id is block-24f7fac60c5ecb3e84ae. I am not able to enter a custom code block with the plan I am on.

 

Link to post
17 hours ago, tv42 said:

@tuanphan I am brand new to coding and website-building. Could you take a peek at the website I am working on? I am trying to make a very short block at the footer of every page for the copyright notice, but I haven't gotten anything to work yet.

Website: vdlbuilders.com / password: preview

I believe the block id is block-24f7fac60c5ecb3e84ae. I am not able to enter a custom code block with the plan I am on.

 

Use this CSS

footer#footer-sections>section:last-child .content-wrapper {
    padding-top: 5px;
    padding-bottom: 5px;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
3 hours ago, tuanphan said:

Use this CSS


footer#footer-sections>section:last-child .content-wrapper {
    padding-top: 5px;
    padding-bottom: 5px;
}

 

Thanks for your response. It doesn't look like that worked either, though 😞

Link to post

Try this

[data-section-id="5e8f4059a780b645bb8468ac"] {
    min-height: 10vh !important;
}
[data-section-id="5e8f4059a780b645bb8468ac"] .content-wrapper {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
41 minutes ago, tuanphan said:

Try this


[data-section-id="5e8f4059a780b645bb8468ac"] {
    min-height: 10vh !important;
}
[data-section-id="5e8f4059a780b645bb8468ac"] .content-wrapper {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

 

That worked! Thanks for your help!

Link to post
  • 1 month later...
Posted (edited)
On 10/14/2019 at 10:05 AM, colin.irwin said:

Can you provide a link to your site?

 

On 10/15/2019 at 6:07 AM, colin.irwin said:

There is a min-height of 33vh set on sections. You need to override that to get the sections smaller. 

For all sections this would be:


.page-section {
    min-height: 0 !important;
}

For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.

Somethig like this:


.page-section[data-section-id="5d979fd8590a832f3c411579"] {
    min-height: 0 !important;
}

 

 

Edited by AdamR-NC
Link to post

Working in 7.1 and I'm not really a coder. Is there a way to take section heights all the way to 0 on a site? (It doesn't allow for lower than 10) I have too much space between text blocks and image content.

Link to post
  • 2 weeks later...

@tuanphan If I want to change the vertical padding on every slideshow throughout my site, do I need to write a bit of code that identifies each of those items individually or is there a way to implement a site-wide change to this aspect of the design? Thanks for all the help you provide in this community!

The site I'm working on is hillashapira.com, password: 2020. Just trying to close the gap between slideshows and the text section beneath them. 

Link to post
On 6/6/2020 at 11:00 PM, AdamR-NC said:

Working in 7.1 and I'm not really a coder. Is there a way to take section heights all the way to 0 on a site? (It doesn't allow for lower than 10) I have too much space between text blocks and image content.

Add to Home > Design > Custom CSS to remove min-height 10

#page section {
	min-height: unset !Important;
	height: auto !important;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
On 6/20/2020 at 12:32 AM, nellykate said:

@tuanphan If I want to change the vertical padding on every slideshow throughout my site, do I need to write a bit of code that identifies each of those items individually or is there a way to implement a site-wide change to this aspect of the design? Thanks for all the help you provide in this community!

The site I'm working on is hillashapira.com, password: 2020. Just trying to close the gap between slideshows and the text section beneath them. 

I think I answered you. You can check again

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

I injected the code you sent above without success. Where I see #page, do I need to use .gallery-slideshow instead? Attached, you'll see a photo of what I'm hoping to achieve. Thank you!

2 hours ago, tuanphan said:

Add to Home > Design > Custom CSS to remove min-height 10


#page section {
	min-height: unset !Important;
	height: auto !important;
}

 

 

Screen Shot 2020-06-21 at 11.32.00 AM.png

Link to post
20 hours ago, nellykate said:

I injected the code you sent above without success. Where I see #page, do I need to use .gallery-slideshow instead? Attached, you'll see a photo of what I'm hoping to achieve. Thank you!

Can you share link to page in screenshot? I can't find exact portfolio page

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
9 hours ago, nellykate said:

Add to Home > Design > Custom CSS

[data-section-id="5eebfb3b41e0e356fec85a0a"] .gallery-slideshow {
    padding-bottom: 2vw !important;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...