reduce padding top and bottom of gallery

Site URL: https://www.awatelier.com.au/

Hi, I'm brand new to squarespace and have just been provided access to our newly created website.  I'm trying to reduce the padding on all the gallery pages (Grid: Simple) so that the space between the single column images and two column images is smaller. I know I'll need some Custom CSS but not sure where to start!! Any help would be greatly appreciated!

14 hours ago, SquareRefresh said:

Hey @KathrynW try to reduce the site margin.


or try to use next code:

.gallery-grid[data-width="inset"] {
  padding-top: 1.5vw;
  padding-bottom: 1.5vw;
}

 

Thanks so much @SquareRefresh the code worked 🙂  I still have a couple of pages that aren't playing nice but will keep working on it...... 

hi @SquareRefresh. this code isn't working for me for some reason. i am looking to reduce top/bottom padding on gallery grids. these grids will exist site-wide for me (i plan to use this format on several pages). here is a link to an example page that illustrates the padding issue. please let me know if you have any questions - and really appreciate your help!!

https://lostlanguag.es/ongoing

jonathan

On 8/30/2022 at 2:22 AM, jonathanharris said:

 this code isn't working for me for some reason. i am looking to reduce top/bottom padding on gallery grids. these grids will exist site-wide for me (i plan to use this format on several pages). here is a link to an example page that illustrates the padding issue. please let me know if you have any questions - and really appreciate your help!!

https://lostlanguag.es/ongoing

jonathan

You mean this red padding?

thank you so much @tuanphan. no, that is spacing i added intentionally. the padding i am talking about is here and elsewhere on that page, which cannot be reduced. (note that half of the top padding is composed of padding from the larger picture above.) 

On 8/31/2022 at 6:25 PM, jonathanharris said:

thank you so much @tuanphan. no, that is spacing i added intentionally. the padding i am talking about is here and elsewhere on that page, which cannot be reduced. (note that half of the top padding is composed of padding from the larger picture above.) 

 

I think it is padding between blocks. All blocks has a default 17px top and 17px bottom padding.

You can add this to Design > Custom CSS. It will remove Gallery top/bottom padding

/* gallery padding */
.gallery-block {
    padding-top: 0px;
    padding-bottom: 0px;
}

wonderful @tuanphan, this beautifully did the trick on the top!! but the bottom padding still seems a little funny. any thoughts? if this can't be fixed, what you have resolved is workable for me and i'm extremely grateful for your continued help.

21 hours ago, jonathanharris said:

wonderful @tuanphan, this beautifully did the trick on the top!! but the bottom padding still seems a little funny. any thoughts? if this can't be fixed, what you have resolved is workable for me and i'm extremely grateful for your continued help.

Try this new code

/* gallery padding */
.gallery-block {
    padding-top: 0px;
    padding-bottom: 0px !important;
}

@tuanphan 

still a gap, i'm afraid. i appreciate your efforts!!

i suspect it has something to do with this command:

It does look like 20px of padding is going both between and beneath the grid. Your code is overruling the top padding, but not the bottom unfortunately. Or, alternatively, it is the generic 17px of padding that you mentioned above comes with every block.

What do you suggest?

Thank you once again for your efforts.

Jonathan

14 hours ago, jonathanharris said:

@tuanphan 

still a gap, i'm afraid. i appreciate your efforts!!

 

i suspect it has something to do with this command:

 

It does look like 20px of padding is going both between and beneath the grid. Your code is overruling the top padding, but not the bottom unfortunately. Or, alternatively, it is the generic 17px of padding that you mentioned above comes with every block.

What do you suggest?

Thank you once again for your efforts.

Jonathan

 

ah, it is 20px bottom margin of gallery block

Use this code to remove margin

div.gallery-block .margin-wrapper {
    margin-bottom: 0px !important;
}

@tuanphan

it's perfect, thank you so much!!!!

Hi @tuanphanI have been following this thread as I am facing a similar problem to the initial poster. 
I want to reduce the padding between my single column and double column gallery grids, as they are currently set to a default that looks to be around 57px at full width (1440). Ideally I want to reduce this padding to 20px top & bottom. 

I managed to do it by editing each individual div within chrome's inspect tool (https://tppr.me/oRbaT) but can't seem to add the correct custom CSS to properly reduce the padding in Squarespace. I have tried the various lines of code suggested in this thread and none of them have worked so far.

Any suggestions you have would be much appreciated!!

Site link: https://www.laurenchalk.com/info-design
Password: apsleydrive

On 12/10/2022 at 4:57 AM, LauChalk said:

Hi @tuanphanI have been following this thread as I am facing a similar problem to the initial poster. 
I want to reduce the padding between my single column and double column gallery grids, as they are currently set to a default that looks to be around 57px at full width (1440). Ideally I want to reduce this padding to 20px top & bottom. 

I managed to do it by editing each individual div within chrome's inspect tool (https://tppr.me/oRbaT) but can't seem to add the correct custom CSS to properly reduce the padding in Squarespace. I have tried the various lines of code suggested in this thread and none of them have worked so far.

Any suggestions you have would be much appreciated!!

Site link: https://www.laurenchalk.com/info-design
Password: apsleydrive

 

Add some CSS like this (Design > Custom CSS)

.gallery-grid.gallery-grid--layout-grid {
    padding-top: 1px;
    padding-bottom: 1px;
}