0

I'm using Zurb's Foundation 4 alongside Isotope to create responsive layouts with different column number and masonry/row/infinite-scroll options.

The problem is, at some width sizes (browser resize) - Isotope is struggling to figure out where to put the content, this is happening on every browser except for Safari.

The content will be dropped from 2 rows - to 1 (left hand) row, back to 2 rows, then again to 1 (left hand) row - then to the foundation full width row as the browser resize gets smaller.

I've added a 30 second video demonstration here http://www.youtube.com/watch?v=Sl7DSxBMK_U

I feel like I'm missing something really simple but I cant find what the answer might be?

Many thanks to anybody who can shine some light on this!

Thanks!

user2811225
  • 1

1 Answers1

0

I think your problem is that isotope is trying to refit the image into the next row but foundation columns are also actively resizing the container of the image

So, everytime it gets moved by isotope but as soon as that happens, the foundation's grid is also resizing the image container so it flies back into the row.

Try not using foundation's grid for the items that are being laid out in isotope alone.

http://isotope.metafizzy.co/ itself does not use a responsive grid The items there have fixed widths but there are different types of elements with different widths so it looks random

Vinay Raghu
  • 1,269
  • 2
  • 13
  • 22
  • Thanks for your advice Vinay. Unfortunately the theme I've built really requires the Foundation classes as there are many loop layout options. I've found a workaround that that didnt seem to work before, but seems to be working now :S Changing the column % values a fraction less than they are seems to do the trick. eg, large-6 columns {width:50%;} -----> {width:49.9%;} I read it was a problem with jQuery struggling to resize percent values, typical! Thanks again, Maki – user2811225 Sep 25 '13 at 10:00