Layout issue - left vs right aligned images

Design help General
1

I’m getting a inconsistent alignment of images on a page that shares a template with other pages. At the bottom of the page is a grid of photos that gets pulled from a collection.

On one page, I’m getting a weird layout where the the images were right-aligned or as you can see below, right aligned with spacing issues or possibly a missing image.

bad_layout
bad_layout2758×1272 277 KB

On other pages that use the same template, the images appear as they should, left-aligned.

good_layout
good_layout2792×1298 367 KB

good_layout2
good_layout22800×1232 244 KB

Has anyone seen this or have an idea why this is happening?

The images are essentially in a container where they are floated left. The layout anomaly only occurs at the desktop size.

Thanks for any help!

2

Hi @oeidesign

Could you share your read only link please. This will help see the problem and offer a speedy solution, hopefully! :smile:

I can safely say it’s the third image along that is causing you the issue… there are 4 lines of text. All the rest have 3, but there is a much better way to do this using the flex settings to avoid this in the future.

3

You are probably using float for each item. Some items are taller than the others due to longer content.

I suggest using display flex on the parent element instead, which will align items of different height properly.

4

Thanks @samliew and @magicmark. I did not see that image with the extra line of text!

1 Like