Jump to content

Images fall out of bottom alignment when resizing window

Recommended Posts

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!

Screen Shot 2021-07-07 at 12.16.46 PM.png

Screen Shot 2021-07-07 at 12.16.57 PM.png

Edited by piethout
Link to comment
  • 3 weeks later...

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.

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.