Fire2019 Posted October 14, 2019 Share Posted October 14, 2019 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! TinaHuffman 1 Link to comment
colin.irwin Posted October 14, 2019 Share Posted October 14, 2019 Can you provide a link to your site? CB1 and deaton72 2 I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
TwoFifthsDesign Posted October 14, 2019 Share Posted October 14, 2019 First click on the little pencil to edit the block... Then use the section height tool to adjust the section height.... I hope this helps. Steven Scott - Creative PartnerTwoFifths Design Ltd.59 Fifth StreetNewtongrangeEdinburghEH22 4PJT: 0131 663 6047M: 07925 950 031E: hello@twofifthsdesign.comwww.twofifthsdesign.com Link to comment
Fire2019 Posted October 15, 2019 Author Share Posted October 15, 2019 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 comment
colin.irwin Posted October 15, 2019 Share Posted October 15, 2019 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; } BrookwoodDrew, IvanOB, Milton-Creative and 9 others 9 2 1 I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
MegD Posted January 30, 2020 Share Posted January 30, 2020 (edited) 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 January 30, 2020 by MegD Link to comment
mpuls1 Posted April 3, 2020 Share Posted April 3, 2020 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 comment
tuanphan Posted April 4, 2020 Share Posted April 4, 2020 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 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
tv42 Posted April 9, 2020 Share Posted April 9, 2020 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 comment
tuanphan Posted April 10, 2020 Share Posted April 10, 2020 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; } 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
tv42 Posted April 10, 2020 Share Posted April 10, 2020 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 comment
Solution Featured Comment tuanphan Posted April 10, 2020 Solution Featured Comment Share Posted April 10, 2020 Try this [data-section-id="5e8f4059a780b645bb8468ac"] { min-height: 10vh !important; } [data-section-id="5e8f4059a780b645bb8468ac"] .content-wrapper { padding-top: 2px !important; padding-bottom: 2px !important; } SodaCreekDigital, GemmaErnst, emilystrickler and 3 others 4 2 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
tv42 Posted April 10, 2020 Share Posted April 10, 2020 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 comment
AdamR-NC Posted June 6, 2020 Share Posted June 6, 2020 (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 June 6, 2020 by AdamR-NC Link to comment
AdamR-NC Posted June 6, 2020 Share Posted June 6, 2020 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. Twfstuff 1 Link to comment
Kate Posted June 7, 2020 Share Posted June 7, 2020 Yeah I do think you would need code to do this @AdamR-NC ....Default padding makes sense for keeping pages responsive across devices. Timacious 1 If you are looking for a way to add Anchor Links, Gallery Blocks, or a Rotating Banner with Content Blocks overlaid in Squarespace 7.1, you can find all these plugins in our Squarespace add-on store here: www.Squareaddons.com -- Enjoy! Link to comment
nellykate Posted June 19, 2020 Share Posted June 19, 2020 @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 comment
tuanphan Posted June 21, 2020 Share Posted June 21, 2020 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; } 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
tuanphan Posted June 21, 2020 Share Posted June 21, 2020 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 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
nellykate Posted June 21, 2020 Share Posted June 21, 2020 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; } Link to comment
tuanphan Posted June 22, 2020 Share Posted June 22, 2020 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 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
nellykate Posted June 23, 2020 Share Posted June 23, 2020 https://www.hillashapira.com/its-ok-to-love-flowers Site password: 2020 Link to comment
tuanphan Posted June 23, 2020 Share Posted June 23, 2020 9 hours ago, nellykate said: https://www.hillashapira.com/its-ok-to-love-flowers Site password: 2020 Add to Home > Design > Custom CSS [data-section-id="5eebfb3b41e0e356fec85a0a"] .gallery-slideshow { padding-bottom: 2vw !important; } 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
kpyoung Posted June 27, 2020 Share Posted June 27, 2020 Hi, I need help adjusting the height in the section of my page that has "Free Shipping" in it. I tried the code above and couldn't get it to work. Here is the link to my page. I'm still in the free trial period, so hopefully this is the correct link. If not, please let me know what you need. https://terrier-tetra-hwye.squarespace.com/ Link to comment
Recommended Posts
Posted by tuanphan,
6 reactions
Go to this post
Create an account or sign in to comment
You need to be a member in order to leave a comment