Streaming live at 10am (PST)

Dynamic Collection Layout Breaks


#1

Hey Guys,

I’m trying to design a full width project grid that in theory should be super simple. A 3 image across masonry grid that extends down the page loading dynamic projects from a dynamic collection.

My issue is that in both Firefox and Chrome the layout breaks, and in Safari once extended to a screen resolution larger than 1920 the layout breaks again.

I have had some advice to set a height class on the images to stop the breaking, however I’m unsure how to do this without distorting the images as the browser is resized.

Any help would be amazing
andy@andrewmaccoll.com


Here is my public share link: Site Link
(how to access public share link)


#2

Hi @andymaccoll, thanks for the good question. I would apply the height to the class that is assigned to the Collection List item element, instead of to the image, and then set the images to be auto width and auto height.

The images will resize according to their aspect ratio, so if you have different images of different aspect ratio used, then you will see some white space on some of the images.

One solution is to make sure that all images are the same original dimension, or expect some whitespace on some images shown.

You can also set the images to be background images so that when the collection list item is smaller than the image, the image will zoom and crop predictably.

The collection list does not auto-calculate for varying height of content inside the collection list, so introducing varying height will cause the extra whitespace on the page and the layout will break.

I hope this helps.


#3

You @cyberdave are my FAVOURITE person on the earth right now. Thank you so much I have spent an entire day on this which was fun but also frustrating. It’s all working absolutely perfectly across all browsers now.

I set the dynamic grid up with a ‘Link Block’ to go to each project and inside that the image issue was solved taking your advice by creating a ‘Div’ bound to background images set the width to 34vw and height to 33vh respectively (lower on the tablet and mbl versions) which now all resize beautifully across all browsers. Wowee.

You’re a legendary man!


#4

I had a similar issue… definitely a learning-curve with making sure dynamic lists are responsive and look good on all devices and browsers!


#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.