Streaming live at 10am (PST)

Dynamic portfolio images not consistent size in a grid in Firefox?


#1

Hi again! :wink:

Here is my public share link: https://preview.webflow.com/preview/adrialdesigns-redesign?preview=09b5f0308b7443e841b8fd0805c7e1de

Here's the dealy-o: I'm simply laying out my portfolio items in a grid, but the grid is showing "holes" in it on Firefox (but not on Chrome). I have saved all the images as exactly the same size and used a dynamic list to display them in a grid, so they should be showing up the same throughout, right?

Here's a screenshot with FF at a larger screen size showing the gaps in the grid: https://www.screencast.com/t/OCpcC3gLdB6 ... and another at a narrower screen size: https://www.screencast.com/t/KJGgpLjXcvHr

What I've been able to find in highlighting the page is that when the page is narrower and the items are stacked, some images seem to be smaller width-wise than others (again, even though all of them are saved at the same dimensions). See this screenshot for what I'm talking about: https://www.screencast.com/t/s10wxJGqRHV

Here's how it's supposed to look like (in Chrome): https://www.screencast.com/t/sVSeRQkA

Any ideas, awesome webflowers? :smiley:


#2

Hi there @adiggy, at the moment the dynamic list item does not autocalculate the height of dynamic items, so give the class that is assigned to the Dynamic Item, a value for Height, either px, % or vh value.

In order to have equal spacing in the grid, all dynamic items need to be the same height.

I hope this helps


#3

Thanks again as always for jumping in to help, Cyberdave!

My clarifying question here is similar to the interactions post you just helped with: If I had a specific height on these elements, then wouldn't I have to change the height in each responsive view? Is there a way to give all of them a height but still allow all of them to flow responsively across the board? For example, is there a way to keep the ratio 2:1 in all viewports or does there have to be a specific height?


#4

Any ideas on this? It looks like the grid at the bottom looks perfect in Chrome and Safari, but those gaps show up in Firefox ...
http://adrialdesigns-redesign.webflow.io/logo-design/laurus-foundation-logo-design


#5

Hi @adiggy, it does not appear that any height was added yet to the dynamic item. The dynamic item does not yet account for dynamic items of varying height, so it is a good idea to give the dynamic item some height to be consistent across all the browsers.

Take a peek here:

Regarding the height in the lower views, you might need to change the height, but probably is not going to impact as much if you only show two or even one column of images on mobile landscape and lower views.

On lower views you could change each dynamic item width from 33.333% to say 50% to show only two items per row, or 100% to show one item per row. When showing 1 items per row, i.e. on mobile landscape, you could then set the height to auto for the dynamic item as the height would no longer be a factor.


#6

Yep, that did it! Thanks Mr. CyberDave! :smiley:


#7

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