mpnguyen99 Posted January 29, 2021 Share Posted January 29, 2021 (edited) 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 January 29, 2021 by mpnguyen99 Grammar TinaHuffman 1 Link to comment
tuanphan Posted February 3, 2021 Share Posted February 3, 2021 Add to Design > Custom CSS #page section .content-wrapper { padding-top: 5px !important; padding-bottom: 5px !important; } Dizablah, m00s and Madmiike 3 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
m00s Posted July 24, 2021 Share Posted July 24, 2021 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). However, 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). 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! TinaHuffman 1 Link to comment
tuanphan Posted July 25, 2021 Share Posted July 25, 2021 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). However, 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). 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
m00s Posted July 26, 2021 Share Posted July 26, 2021 On 7/25/2021 at 3:34 AM, tuanphan said: Can you share link to page where you want to reduce padding? We can tweak the code easier Here is a link: https://rhombus-parsnip-85ng.squarespace.com pass: Madhya I'd like to reduce padding on multiple pages on this site, but this is the page I posted a screenshot of, and I think if I know how to do it on this page, I can do it on the other pages too. Thank you! Link to comment
Madmiike Posted November 25, 2021 Share Posted November 25, 2021 On 2/3/2021 at 7:32 AM, tuanphan said: Add to Design > Custom CSS #page section .content-wrapper { padding-top: 5px !important; padding-bottom: 5px !important; } Thank you, This helped me Link to comment
dotandpeg Posted June 7, 2023 Share Posted June 7, 2023 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! Link to comment
tuanphan Posted June 9, 2023 Share Posted June 9, 2023 I see you solved with this code? section[data-section-id="6448e8b39f1d256fe08dc494"] .user-items-list { padding-top: 2vmax !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
jojod Posted September 23 Share Posted September 23 (edited) 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 Edited September 24 by jojod Typos and further clarification Link to comment
jojod Posted September 24 Share Posted September 24 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 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. Link to comment
jojod Posted September 24 Share Posted September 24 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. 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. tuanphan 1 Link to comment
H0LLY Posted Wednesday at 11:21 AM Share Posted Wednesday at 11:21 AM 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 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment