Jump to content

Reduce padding around slideshow gallery section

Recommended Posts

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=""]

reduced-top-bottom-space.png

Link to comment
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

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
  • 8 months later...
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?

 

 

1836078521_ScreenShot2020-12-10at8_22_52pm.thumb.png.b24b4cc19f428f46c19730ee26d4badc.png

Can you share link to page in screenshot? We can help 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
  • 2 months later...

@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!

Edited by AnaDavisDesign
Link to comment
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

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
  • 2 weeks later...

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?

image.thumb.png.81f2919c144e0612040808ec4180fac5.png

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
  • 3 weeks later...

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.

web preview.jpg

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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

 

Edited by creativesurfing
Link to comment

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.

1195429344_ScreenShot2021-04-05at2_54_54PM.png.79ce3e96ea128b5ba6886e976a62a4b0.png

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

1195429344_ScreenShot2021-04-05at2_54_54PM.png.79ce3e96ea128b5ba6886e976a62a4b0.png

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.

Edited by creativesurfer
Link to comment
  • 1 month later...

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!!

 

Screenshot (73).png

Screenshot (72).png

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 11 months later...

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. 

Edited by calayton99
Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.