Streaming live at 10am (PST)

Layout issue - left vs right aligned images


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

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!


#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 @markos84uk. I did not see that image with the extra line of text!