Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Reduce padding around slideshow gallery section


BarbaraD

Question

  • Answers 22
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

@creedon that did the trick!!  Thanks so much!!

Posted Images

22 answers to this question

Recommended Posts

  • 0

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;}

Link to post
  • 0

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 post
  • 0
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

Link to post
  • 0

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

Link to post
  • 0
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

Link to post
  • 0

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

 

 

Slideshowpaddingmobile.png

 

Link to post
  • 0

@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 post
  • 0
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

Link to post
  • 0

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

Link to post
  • 0

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 post
  • 0

@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 best , and see my profile. Thanks for your support!

Link to post
  • 0
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 post
  • 0

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 best , and see my profile. Thanks for your support!

Link to post
  • 0
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 post
  • 0

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 post

Create an account or sign in to comment

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


×
×
  • Create New...