Streaming live at 10am (PST)

Layout issue - left vs right aligned images

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.

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

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!

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.

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.

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

1 Like