Streaming live at 10am (PST)

Responsive photo grid

Hi there, I’m trying to replicate the instagram photo grid on browser. When I shrink the browser on instagram.com, the container & the photos scale down. I’m trying to recreate this effect on a website I’m building on Webflow. If you guys got some time to check out my site here is the read-only

Read-only: https://preview.webflow.com/preview/newbookalliance?preview=698658a631d7503c1e23e0f8485ec822

Website url: newbookalliance.webflow.io

here are some screenshots of the grid I’m talking about.

Instagram: https://www.dropbox.com/s/t93x6pulamhq6ky/Screen%20Shot%202017-10-26%20at%2012.07.36%20PM.png?dl=0

Newbook: https://www.dropbox.com/s/vkhrz60781evts0/Screen%20Shot%202017-10-26%20at%2012.07.17%20PM.png?dl=0


Here is my site Read-Only: https://preview.webflow.com/preview/newbookalliance?preview=698658a631d7503c1e23e0f8485ec822
(how to share your site Read-Only link)

Why not use webflow columns?

Or flexbox

Your grid is very broken (You use BG images? why?) - use img tag (responsive: width: 100%; height: auto). On instegram all images are square (so crop your images by photoshop or online) if you want the same look.

Also - width: 20vw; - this is not the best unit for responsive grid (use %)

Also you could chrome-inspect instegram site and see the styles.

On mobile - 3 cols with very small right margin (3px). On desktop the same layout with extra margin (28px)

Container.
use max-width % (on tablet/desktop) and 100% (on mobile + small padding). NOT width!! (max-width) or use build in container:

My dude, your response has been very helpful!

the site is much more responsive, thank you for taking the time to provide links & insight.

cheers

1 Like

You welcome! :slight_smile: Mark as solve to close this topic (and for future searches about this topic). Thanks!!

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