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

How to change padding on block based images grids

Question

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.

 

https://jonathangallagher.squarespace.com/overview-2

 

Notes:

- 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

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

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.

Share this post


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