Jump to content

How to change padding on block based images grids

Recommended Posts

I have an issue with irregular padding and block sizes.

I am trying to create a page composed of Images in an irregular grid.

1. For some reason the images are being automatically cropped so that they don't fit their container - leaving irregular spacing between images

2. I would like to adjust the spacing between images

My attempts to figure out the CSS have been a bit of guess work with no elegant fix that works. Ideally I'd like a responsive padding solution.





- This layout is adapted from the supplied grid image layouts, which I then used the poster option on each image.

- Brine Template

- Bizzarely when i click on each image to edit it, it suddenly fills it's container, only to revert back once finished.

- I can't to minor adjustments the containers of the images, some don't align, which is odd, as you'd expect there to be a predefined grid

Link to comment
  • Replies 1
  • Created
  • Last Reply

i found 1 factor contributing to the cause:

- turns out the grid adjusts to the image sizes, thereby leaving big gaps everywhere unless you pre-plan it and adjust all our images accordingly.

seems very odd.

- but that doesn't explain the padding seen between rows, that isn't there between columns, that is also noticeable on mobile.

Link to comment


This topic is now archived and is closed to further replies.

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