Creating responive photo grid

Hello, I am trying to create this design:

I have been able to create a two column design that looks close to it but the photos do not resize appropriately and looks very bad. Also how can I implement the hover over effect that is used on the photos where the fade with a title on hover?

I have included a link to the original page as well as the page I am trying to create with login info in a secure note

Hello @juryk,

Thanks for a very detailed post information. I have to edit your homepage and check your image settings. As it turns out, the Retina option is enabled. You will need to disable it since your uploaded image not quite big enough to cover the cover if Retina option is enabled.

-j0RVoMcTY_zqg4VQuJztw

The Flexbox Layout option in the column must be enabled as well. The Vertical Alignment must be set to “End” so that the image on the left will always be align to the bottom edge of the image in the right column.

The images needs to have 100% width while the rows must have the Global Container enabled with 1rem gap height and width and 1rem top and bottom padding.

Hope this helps. Kindly check your site now.

This is very informative! Thank you so much

You’re always welcome @juryk!

For more guidance, please check our documentation here.

Cheers.

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