Images fall out of bottom alignment when resizing window

Site URL: https://www.piethoutenbos.com

I have been using the little dot dragger to align image bottoms, sometimes next to another image, sometimes next to a gallery. I have noticed that resizing the window narrower the alignment falls off. Here are some links as examples.

Scroll down to 'Material Variations' section on the pages linked below:

https://www.piethoutenbos.com/petals-side-tables (Images next to gallery slideshows)

https://www.piethoutenbos.com/halsey-prime (Image next to another image on top then images next to gallery slideshows below)

I have many instances of this, and it becomes more evident when viewing the site on mobile as I have the site always stay in desktop mode but the site gets scaled a bit making the misalignment more evident. However its also pretty evident on laptops when the windows are narrower.

Is it possible to force content that is 'next to each other' to always remain aligned on top (which happens automatically) but also on the bottom?

I have also attached 2 images showing the same content at different window widths showing the problem.

There are many instances of this on my site. I would like all images that are next to each other to 'snap' to this bottom and top alignment.

Thank you!

Hey there,

Easy answer is to use Gallery Blocks, Gallery Sections or Auto-Layout Sections depending on version.

Slightly more complicated is to write a bunch of specific media queries to either run them as split sections or (if using 7.0)  your choices would be:

1. Use javascript to match heights (possibly going to be a bit janky)

2. Calculate individually with CSS and enforce max-height

I suppose another option could be to resize the Gallery blocks and use a pseudo element in your CSS to display the image before/after. But this would need to be done one by one.

I would probably consider applying flex to the rows that you have this combo on, but the way blocks are made means you have to spend a bit of time going through and figuring out which other classes also need their properties changed to make flex + height: 100% work. You also have to consider that images with different aspect ratios will need to be calculated differently so that's more work. I think a good start point would be to always ensure the images have the same aspect ratio and go from there.