Reduce padding around slideshow gallery section

Site URL: https://translegal-llc.squarespace.com/

Hi,

Am having no luck writing CSS to target a section in 7.1 to reduce the space above and below this image in a gallery section (screenshot). Would love some help!

Thanks,

Barbara

Can you share password.

--

I guess the code will be

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

Yes, sorry. Password is: t\

I just set the section hight to small and the width to Large and the padding is reduced. Just needed the correct combination of settings: https://translegal-llc.squarespace.com/home-3

Would like to reduce the space above and below the slider even more, but am thinking that the way gallery sections work in 7.1 I am stuck with the default minimum space (10) between sections.

Am still learning how to target sections, so thanks for showing me how to use the [data-section-id=""]

14 minutes ago, BarbaraD said:

I just set the section hight to small and the width to Large and the padding is reduced. Just needed the correct combination of settings: https://translegal-llc.squarespace.com/home-3

Would like to reduce the space above and below the slider even more, but am thinking that the way gallery sections work in 7.1 I am stuck with the default minimum space (10) between sections.

Am still learning how to target sections, so thanks for showing me how to use the [data-section-id=""]

 

You can adjust 10px to 0

Got it, thanks again.

I used your code ([data-section-id="enter section id here"] .content-wrapper {padding-top: 10px !important; padding-bottom: 10px !important;})

and set it to 0px but still finding the padding too much

Is there a way to further reduce it?

On 12/10/2020 at 4:24 PM, jonongec said:

I used your code ([data-section-id="enter section id here"] .content-wrapper {padding-top: 10px !important; padding-bottom: 10px !important;})

and set it to 0px but still finding the padding too much

Is there a way to further reduce it?

 

 

Can you share link to page in screenshot? We can help easier

Same issue, but on mobile. www.marydisomma.com

It looks fine here. Did you solve this?

On 2/26/2021 at 3:35 AM, AnaDavisDesign said:

Same issue, but on mobile. www.marydisomma.com

 

 

@tuanphan, no, I temporarily remade the home page. I still need help with this padding issue, please! 🙂

My work-around was to create a manual slideshow (a summary section that uses images from "fake" blog pages). It's not good though, because if anyone clicks on the images in the summary block, it takes them to the Fake blog pages. It's a mess right now. Would be much better to just fix the padding issue. Thank you!

On 3/3/2021 at 11:56 PM, AnaDavisDesign said:

@tuanphan, no, I temporarily remade the home page. I still need help with this padding issue, please! 🙂

My work-around was to create a manual slideshow (a summary section that uses images from "fake" blog pages). It's not good though, because if anyone clicks on the images in the summary block, it takes them to the Fake blog pages. It's a mess right now. Would be much better to just fix the padding issue. Thank you!

Can you add slideshow? Then we can check easier

The slideshow is at this password protected page. Password: Baking1

Try adding to Design > Custom CSS

/* Slide padding */
@media screen and (max-width:767px) {
section[data-section-id="5fd2dc18a0405a46535148be"] .gallery-slideshow {
    padding-bottom: 2vw !important;
    height: 30vh !important;
}
}

Also I see the site is a bit narrow on tablet. Do you want to increase width?

Can anyone help me with a similar issue, I've tried various items in the above and none have worked.

So the Custom CSS code below input into the 'design' section worked for most sections in that I can reduce the height, but unfortunately where I have a simple slideshow on my pages, reducing the height just seems to reduce the height of the slideshow itself rather than the padding top and bottom. There is just so much padding its making my site look a bit silly.

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

Does anyone know how to fix this? Thank you. 

See image - the top is the thumbnails displayed at the bottom of my slideshow, then a huge gap until the next section which is text. There is a similar gap at the top of the slideshow above the main image.

Total code/squarespace newbie here.

@creativesurfer

Please post the URL to the page on your site.

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 is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

On 4/5/2021 at 8:13 PM, creedon said:

@creativesurfer

Please post the URL to the page on your site.

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 is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

I've made a copy of my actual site as I was concerned I would mess it up playing around editing code. Will I be able to move my subscription over to this new site which is currently showing as a trial?

So on the site if you go to the 'projects' page, the gallery has too much padding top and bottom.

And then if you click on a project, for example the first one - barn, you will see that the slideshow has a similar issue with lots of space above and below.

And then lastly, it is possible to bring the header and footer in even further from the edges? I've got the maximum at the moment but I'd really like to bring it in more if possible.

Thanks so much

Lets take these issues one by one. I don't know if I'll be able to answer each issue but others may.

2 hours ago, creativesurfer said:

on the site if you go to the 'projects' page, the gallery has too much padding top and bottom.

You have two options. One is to reduce the spacing site-wide.

The other is add the following to Design > Custom CSS.

.gallery-grid[data-width="inset"] {

  padding-bottom : 3vw;
  padding-top : 3vw;
  
  }

This is for v7.1.

Let us know how it goes.

15 hours ago, creedon said:

Lets take these issues one by one. I don't know if I'll be able to answer each issue but others may.

You have two options. One is to reduce the spacing site-wide.

The other is add the following to Design > Custom CSS.

.gallery-grid[data-width="inset"] {

  padding-bottom : 3vw;
  padding-top : 3vw;
  
  }

This is for v7.1.

Let us know how it goes.

Brilliant thank you!!! - the code worked really well for the gallery padding top and bottom. Is there a way to customise the gaps at the sides? Inset isn't really narrow enough. I tried adding   width: 50% !important; to the code which works initially but then adds a random big white space at the bottom between the gallery and footer and also makes it look very small on mobile device.
 

I managed to reduce the padding top and bottom of my slideshows by modifying a code found earlier on this thread, winning!
 

The site spacing is really handy but it is already at the maximum page width and the header is still not inset as much as I would like it to be, not sure if there's anything else can be done with that? I'm sure I've seen squarespace based sites where its inset more.

@creativesurfer

The site password no longer works so it's hard for us to help.

Hello,

I cannot for the life of me figure out how to get rid of the white gap beneath my index banner slideshow in Bedford template 7.0, any help would be much appreciated.

www.progressmarine.com.au

Thanks!!

@Garyl

Add the following to Design > Custom CSS.

#collection-6099bc8bae7e7707962fa57d #new-page .index-section-wrapper {

  display : none;
  
  }

This is for v7.0 using the Bedford template family.

Let us know how it goes.

@creedon that did the trick!! 

Thanks so much!!

None of this custom CSS works for me. Can anyone suggest anything else? I still have big gaps top and bottom. I am using a Gallery block with a slideshow: simple setting. None of this code reduces my padding top and bottom. 

2 minutes ago, calayton99 said:

Can anyone suggest anything else?

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.