search

metafizzy / isotope

:revolving_hearts: Filter & sort magical layouts
https://isotope.metafizzy.co
11.05k stars 1.41k forks source link

Isotope layout isn't working #1600

Closed webcrawlersites closed 3 years ago

webcrawlersites commented 3 years ago

Hey there! I am trying to create a responsive layout with each image the same size and space in between the images. How can I achieve that?

Here is my codepen: https://codepen.io/jaytb95/pen/vYxMGqP

Thanks! Jason

thesublimeobject commented 3 years ago

@webcrawlersites — This is not really a Isotope-specific issue, but you should be able to easily fix this issue by using the object-fit property for your images with the value cover (see here). You may need to wrap your images inside of each item in a container with 100% width/height, though. The cover property basically works the same as background-size.

webcrawlersites commented 3 years ago

@thesublimeobject -- I just updated the pen with what you said to do, but it still isn't working. Any suggestions on how to fix it?

thesublimeobject commented 3 years ago

You're using flex and columns in your pen. It would probably be best to use neither, but definitely don't mix the two. Fixing that may fix your object-fit, but like I said, you may have to set a static height or put a wrapper around them. You could also potentially do something like just putting them as background images, etc.