Jump to content

Remove padding from bottom of grid gallery

Recommended Posts

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.

Screenshot 2023-07-11 104600.png

Link to comment
  • Replies 5
  • Views 706
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

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

Link to comment

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.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

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

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

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

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.