Remove padding from bottom of grid gallery

Hi there,

I have a certain page format I'm using over and over where I want two photos next to each other with text underneath. I'm currently using the gallery block in grid layout to display the pictures. The problem I'm facing is that setting the padding in this block to 20 px in order to create a space between the pictures also adds an additional space below the pictures. This adds to the padding around the entire block and the bottom has more spacing than all other edges and makes my text look weirdly far away. How can I get rid of just the 20 px bottom spacing but keep the spacing between photos and the even spacing around the whole block?

Thanks in advance for any guidance you can provide for me.

Can you link to the site please? We can check that way.

It'll likely just be a bit of CSS to remove the padding but we need the site link.

1 hour ago, KwameAndCo said:

Can you link to the site please? We can check that way.

It'll likely just be a bit of CSS to remove the padding but we need the site link.

Sorry! I thought that was included. Here is an example page: https://www.andreagaughanknits.com/blog/helianthustestknitters

Another note is that when the page is displayed very wide on a large monitor it is barely noticeable, but when its displayed on a narrow page (like I included in the screenshot) it's a lot more obvious. This seems to be because the spacing around the whole block scales depending on window size but the 20px between and below the pictures does not.

My suggestion is to target the entire page using a colleciton ID and remove the bottom margin from all Gallery Blocks on the page - as they seem to only be used for these images.

For this you would just write:

#collectionid .slide .margin-wrapper {
margin-bottom: 0!important;
}

Into your custom CSS.

Be aware, however, that if you intend for the blocks to stack on some screens, you would want to use a media query to target different screen sizes.

19 hours ago, KwameAndCo said:

My suggestion is to target the entire page using a colleciton ID and remove the bottom margin from all Gallery Blocks on the page - as they seem to only be used for these images.

For this you would just write:

#collectionid .slide .margin-wrapper {
margin-bottom: 0!important;
}

Into your custom CSS.

Be aware, however, that if you intend for the blocks to stack on some screens, you would want to use a media query to target different screen sizes.

Ah, it seems like this problem may not be solvable because the place where I'm attempting to use these blocks is the blog portion of my website and it seems that blog pages don't have anywhere to add CSS code to at all. I tried adding it to the citewide location but it didn't impact my blog pages. Thanks for your time though!!

On 7/12/2023 at 2:51 PM, AndreaG said:

Ah, it seems like this problem may not be solvable because the place where I'm attempting to use these blocks is the blog portion of my website and it seems that blog pages don't have anywhere to add CSS code to at all. I tried adding it to the citewide location but it didn't impact my blog pages. Thanks for your time though!!

Use a code block on the page?