Decreasing Section Padding Squarespace 7.1

Trying to get rid of this whitespace, any ideas? 

1 hour ago, AlyssaFaden said:

Trying to get rid of this whitespace, any ideas?

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Shown most obviously on the front page here: https://www.alyssafaden.com/ Haven't done much work on the others just yet. 

Hi hi! I've tried everything in this thread (and anything else I find in other forum threads), but am running into issues on mobile.  The code I've added works well for other devices (desktop, laptop, tablet), but there's still a huge gap on mobile (between the last section [the testimonial slider] and the footer).  Any thoughts on how to remove this?

Issue is on my Home page.

Here's the code I'm currently using:

[data-section-id="621692c43056343db79abcae"] {
 margin-top: -320px;
}

@media screen and (max-width:2700px) and (min-width:2400px) {
[data-section-id="621692c43056343db79abcae"] {
 margin-top: -250px;
}
}

@media screen and (max-width:1024px) and (min-width:768px) {
[data-section-id="621692c43056343db79abcae"] {
 margin-top: -80px;
}
}

@media screen and (max-width:767px) {
[data-section-id="621692c43056343db79abcae"] {
 margin-top: -915px !important;
}
}

Site: https://parsnip-greyhound-2tmc.squarespace.com/home

pw: extraspace

Any thoughts?

cc @creedon

1 hour ago, nazaninp said:

Any thoughts?

I don't have a solution but some observations.

I think you may have some errant code in your Settings > Advanced > Code Injection > FOOTER.

I don't think this one is causing the issue you're having but it's good to clean up errant code so it doesn't cause more issues down the road.

After I turned off Custom CSS and SquareKicker locally the huge white space issue went away. So those are the areas you want to look at for your issue.

2 hours ago, creedon said:

I don't have a solution but some observations.

I think you may have some errant code in your Settings > Advanced > Code Injection > FOOTER.

I don't think this one is causing the issue you're having but it's good to clean up errant code so it doesn't cause more issues down the road.

After I turned off Custom CSS and SquareKicker locally the huge white space issue went away. So those are the areas you want to look at for your issue.

Thank you for your thoughts! I've spent a lot of time parsing through my customizations (both css and squarekicker) to try to find the culprit, but no luck yet. I'll just have to keep searching!

I have a section where I'm trying to decrease bottom padding. This image is from the Inspector. I've tried many variations of what is there, but can't seem to get it to work. Any answer would be appreciated!

@CooperBlack

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Hello
I have browsed the forum as well as this post for similar issues to the one that I am having with my site but cannot find a similar post. I have a space between sections that popped up all of a sudden and will not go away. I haven't done anything different and it's only on this one page, not site wide. I have removed and replaced sections around the space, adjusted padding settings, completely removed all css code, etc with no solution. The space between the footer and the next section up is the space that is the issue. While hovering my cursor over that area while in edit mode, there are no available options that pop up like there would be if I were hovering within an editable section. It's just a blank area between editable sections. So weird. Any thoughts?
URL: Episodes — Women Talk Construction Podcast
Thanks in advance for any help!

EDIT: After inspection, it seems it has something to do with the side-by-side-blog section that is ABOVE the section pictured above (the media player within the mic background). It seems to be a 'pagination' thing from that section.

EDIT #2: That is exactly what it is. When I change the amount of items that can be viewed on one page to a higher number (to where every item is on one page) then the gap disappears. If I select a lower number of items to be displayed on the page and there is an 'older post' link appears at the bottom of the side-by-side-blog section, it creates the space again between the footer and the section above. Is there any way to negate that action with css? Thanks

@Username

The space is not there now that I can see so I assume you set the number so that it wouldn't show?

I'm thinking that space is where the pagination goes. If you don't want the pagination you could set the number lower so you can see the source, grab the class name for that area and display none.

1 hour ago, creedon said:

@Username

The space is not there now that I can see so I assume you set the number so that it wouldn't show?

I'm thinking that space is where the pagination goes. If you don't want the pagination you could set the number lower so you can see the source, grab the class name for that area and display none.

Thank you! That did the trick. I was able to keep the lower number of items I wanted visible and hide the pagination gap. 

Have a great day!

Hi. I'm trying to remove the margin-bottom on the home page landing section by adding the code:

//--Home landing styling--//
#yui_3_17_2_1_1650574709778_335 {
  padding-bottom: 0px !important;
}

#block-yui_3_17_2_1_1650396781583_4713 {
  padding-bottom: 0px !important;
}

It works while i'm on the CSS editor, but it no longer works when i go back to Pages. Could you please help?

URL:
https://kristarizzostagingsite-v02.squarespace.com/

Password:
KR-$t@Ging$1t32

Hi there - @tuanphan it looks as though there is no one size fits all solution to reducing padding between elements. So I'd like to share my specific example to see if you can help. 

I am able to adjust the padding between image, text and button in List with the SS tool, yet there is no way to do so with an Image w/ text and button added below.  I'd like to reduce the padding in this image block to match the padding in the list block in the attached. 

Site is https://vuvuzela-pug-95je.squarespace.com/curation_mood-board_nancy-meyers and password is flowerZ612. 

Thanks!

I'm looking for a CSS code snippet to ensure the first section on most of my pages has text aligning vertically against the coloured background, even when I set section height to 18 to make it narrower (I have no idea why setting it to 18 makes it narrower than setting it to the default of 10, but it does). 

SS help says it's a bug and to ask on here for code to override the bottom padding.

Can anyone help?

site: https://pepper-pelican-gr94.squarespace.com/about

pw: ValuesAndFrames

Thanks!

3 hours ago, CommonCause said:

I'm looking for a CSS code snippet to ensure the first section on most of my pages has text aligning vertically against the coloured background, even when I set section height to 18 to make it narrower (I have no idea why setting it to 18 makes it narrower than setting it to the default of 10, but it does). 

SS help says it's a bug and to ask on here for code to override the bottom padding.

Can anyone help?

site: https://pepper-pelican-gr94.squarespace.com/about

pw: ValuesAndFrames

Thanks!

The section has a default top padding

You try adding a blank section above blue section, set minium height, then check it again

10 hours ago, Melbaspence said:

Hi there - @tuanphan it looks as though there is no one size fits all solution to reducing padding between elements. So I'd like to share my specific example to see if you can help. 

I am able to adjust the padding between image, text and button in List with the SS tool, yet there is no way to do so with an Image w/ text and button added below.  I'd like to reduce the padding in this image block to match the padding in the list block in the attached. 

Site is https://vuvuzela-pug-95je.squarespace.com/curation_mood-board_nancy-meyers and password is flowerZ612. 

Thanks!

You mean this padding?

10 hours ago, ozi said:

Hi. I'm trying to remove the margin-bottom on the home page landing section by adding the code:

//--Home landing styling--//
#yui_3_17_2_1_1650574709778_335 {
  padding-bottom: 0px !important;
}

#block-yui_3_17_2_1_1650396781583_4713 {
  padding-bottom: 0px !important;
}

It works while i'm on the CSS editor, but it no longer works when i go back to Pages. Could you please help?

URL:
https://kristarizzostagingsite-v02.squarespace.com/

Password:
KR-$t@Ging$1t32

The #yui- is dynamic id. it will change if you reload the site.

Can you take a screenshot of margin? We can help easier

Hi there! I've tried several CSS suggestions without any luck. I'm trying to reduce the spacing at the top and bottom of my product descriptions. I'll mark up a couple screenshots!

Here's the page:

https://heyerincassidy.com/shop/p/health-coach-instagram-templates-for-canva

Thank you so much!!

On 4/22/2022 at 3:39 PM, tuanphan said:

The section has a default top padding

You try adding a blank section above blue section, set minium height, then check it again

@tuanphanSorry, I tried that but it didn't work. Do you have any CSS that can override the default top padding?

On 4/22/2022 at 3:43 AM, tuanphan said:

You mean this padding?

@tuanphan yes, that's it. How do I close the space between the IMAGE + TITLE, the TITLE and DESCRIPTION, and the DESCRIPTION and BUTTON. Thank you. 

On 4/22/2022 at 3:44 AM, tuanphan said:

The #yui- is dynamic id. it will change if you reload the site.

Can you take a screenshot of margin? We can help easier

Hey, it is solved by using:

[data-section-id="626301efc2df1672697a1e3c"] .content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

Thanks!

On 4/24/2022 at 3:27 AM, heyerincassidy said:

Hi there! I've tried several CSS suggestions without any luck. I'm trying to reduce the spacing at the top and bottom of my product descriptions. I'll mark up a couple screenshots!

Here's the page:

https://heyerincassidy.com/shop/p/health-coach-instagram-templates-for-canva

Thank you so much!!

Add to Design > Custom CSS

/* Individual products gap */
nav.ProductItem-nav {
    display: none;
}
.ProductItem .ProductItem-additional {
    margin-top: 5px;
}

On 4/25/2022 at 12:25 PM, CommonCause said:

@tuanphanSorry, I tried that but it didn't work. Do you have any CSS that can override the default top padding?

Use this CSS

@media screen and (min-width:992px) {
[data-section-id="624a6f5e8ddad257b3c5b093"] {
    padding-top: 170px !Important;
}
}

17 hours ago, Melbaspence said:

@tuanphan yes, that's it. How do I close the space between the IMAGE + TITLE, the TITLE and DESCRIPTION, and the DESCRIPTION and BUTTON. Thank you. 

Use this CSS

div#page-section-625f6b19cf060f609118a3a1 * {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px;
}

10 hours ago, tuanphan said:

Use this CSS

@media screen and (min-width:992px) {
[data-section-id="624a6f5e8ddad257b3c5b093"] {
    padding-top: 170px !Important;
}
}

 

Use this CSS

div#page-section-625f6b19cf060f609118a3a1 * {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px;
}

 

@tuanphan Do I put this in the CSS for the page or for the whole site? I tried both and nothing changed.  Attaching a screen grab when I used the CSS on the page (hit gear next to page name > Advanced and copied the above code in. Any other suggestions? 

Also can you teach me how to apply this to other pages? That way I can do on my own going forward. Thank you.

@tuanphan It worked! It worked! THANK YOU 🙂