Change padding between sections

Is it possible to change the padding between sections? I am trying to decrease the padding between sections in line with the spacing between other images in the project pages.

Thanks

It may be possible but without a URL for the page where you want to reduce the padding it is hard to help.

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

We can then take a look at your issue.

On 1/22/2021 at 5:09 PM, creedon said:

It may be possible but without a URL for the page where you want to reduce the padding it is hard to help.

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

We can then take a look at your issue.

8 hours ago, rmin said:

It has all started over an embedded url file (4th image/scroll over down) that I had to create another section to add it in.

I'm not sure why you had to add another section. I just tested a gallery section on my test site and I was able to get six images in. I think it will take more. Not sure what the upper limit is?

If you really can't add all your images to one gallery section then we can probably come up with some CSS to reduce the padding between galleries.

Let us know how it goes.

On 1/23/2021 at 5:45 PM, creedon said:

I'm not sure why you had to add another section. I just tested a gallery section on my test site and I was able to get six images in. I think it will take more. Not sure what the upper limit is?

If you really can't add all your images to one gallery section then we can probably come up with some CSS to reduce the padding between galleries.

Let us know how it goes.

I can add all images to one gallery no problem. The issue is adding in an embedded image, I have to create another section for it to add the url. Once it is uploaed then the padding above it and below it are what is causing the issue.

Unless there is an easier way to embed the image into the same gallery as the other images??

Thanks

.page-section[data-section-id="600ab654600e5c0f7a3448cb"].vertical-alignment--middle:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ).section-height--medium > .content-wrapper {

  padding-top : 0.25vw;;
  
  }

Add the following to Design > Custom CSS.

.page-section[data-section-id="600ab654600e5c0f7a3448cb"].vertical-alignment--middle:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ).section-height--medium > .content-wrapper {

  padding-top : 0.25vw;
  
  }

#block-yui_3_17_2_1_1611387866640_3828,
#block-yui_3_17_2_1_1611387866640_5137,
#block-yui_3_17_2_1_1611388033433_9839,
#block-yui_3_17_2_1_1611388033433_11286

  {
  
    padding-top : 0.25vw;
    
    }

That should help with the spacing right above the embedded image and the image blocks.

There is an issue at the bottom with spacing which has either to do with the image itself or the height of the embedded code.

The green padding is the normal CSS padding in that element. But in the blue area you can see that the image has the space or the embedded code height is set to high.

Let us know how it goes.

On 1/24/2021 at 11:34 AM, creedon said:

.page-section[data-section-id="600ab654600e5c0f7a3448cb"].vertical-alignment--middle:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ).section-height--medium > .content-wrapper {

  padding-top : 0.25vw;;
  
  }

Add the following to Design > Custom CSS.

.page-section[data-section-id="600ab654600e5c0f7a3448cb"].vertical-alignment--middle:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ).section-height--medium > .content-wrapper {

  padding-top : 0.25vw;
  
  }

#block-yui_3_17_2_1_1611387866640_3828,
#block-yui_3_17_2_1_1611387866640_5137,
#block-yui_3_17_2_1_1611388033433_9839,
#block-yui_3_17_2_1_1611388033433_11286

  {
  
    padding-top : 0.25vw;
    
    }

That should help with the spacing right above the embedded image and the image blocks.

There is an issue at the bottom with spacing which has either to do with the image itself or the height of the embedded code.

The green padding is the normal CSS padding in that element. But in the blue area you can see that the image has the space or the embedded code height is set to high.

Let us know how it goes.

Thanks so much that worked out good.
I ended up editing more and used the iframe code to embed rather than a url link but it works the same and changed the section ID in your code.

The green padding you mentioned, yeah, this was to do with my image. I just edited the height once I pasted in the iframe code.

I ended up not using the #block-yui_x_xx_x_x_xxxxxx  code but for future reference what would these do?

Thanks for all your help with this 🙂

I am looking to reduce the padding-bottom on the first section of this page – https://pear-beige-sfbj.squarespace.com/events-1

PW: 'cyborgsoloists'

I have tried the following CSS, however, none of these are doing what I need them to do.

.content-wrapper {padding-bottom: 0px;}

.page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section).section-height--medium>.content-wrapper {padding-top: 6.6vmax; padding-bottom: 0vmax;}

I need to reduce the padding-bottom of the first content-wrapper to be '0vmax', so that the search bar is closer to the word 'Events'.

Any help greatly appreciated!

On 11/11/2021 at 9:55 PM, cyborg1234 said:

I am looking to reduce the padding-bottom on the first section of this page – https://pear-beige-sfbj.squarespace.com/events-1

PW: 'cyborgsoloists'

I have tried the following CSS, however, none of these are doing what I need them to do.

.content-wrapper {padding-bottom: 0px;}

.page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section).section-height--medium>.content-wrapper {padding-top: 6.6vmax; padding-bottom: 0vmax;}

I need to reduce the padding-bottom of the first content-wrapper to be '0vmax', so that the search bar is closer to the word 'Events'.

Any help greatly appreciated!

 

Add to Design > Custom CSS

[data-section-id="618d217d106f70094492a9bb"] {
    min-height: unset !important;
}
[data-section-id="618d217d106f70094492a9bb"] .content-wrapper {
    padding-bottom: 0px !important;
}