It seems like they’re detecting the browser width, and doing calculations to determine what size those divs/images to display, so no matter the width (within a certain range), there will always be 2 photos, proportionally resized.
Probably using $(window).width() jquery function, then just doing % calculation to display the 2 images per row.
On smaller browser width, they just use one image to display at full div width.
In your heroku sample, you’re using just plain fixed width div, then floated: left. So as you decrease magnification (and therefore available width increases), your div images just stack and float to the left.
@owel That’s it! What didn’t occur to me, however, was that one could capture zoom in and zoom out with an event. I thought the $(window).width() function only applied to things like resizing the browser window with the resize tool. I always seem to have trouble when it comes to floating items; it’s never centered. Thanks by the way.
Wow yeah I see that, nice UI by the way. After playing around with jQuery for a bit I figured out how to know if the page is being zoomed in or out, but how can one find out the actual zoom level? Take the site I’m trying to clone for example. Zooming past 75% makes the main container snap to 100% width, but I have no idea how to implement that. I suppose whatever function they use is checking to see if the available width falls below a certain level.