Streaming live at 10am (PST)

How to keep the same proportion of square image in responsive design?



how can I keep square proportion of images in responsive design like in this website shown below?

Thank you,

have a nice day,


Proportional Square Images

Hi @sspela, thanks for your post. First make sure all your images are the same dimension. Then check out my example video to see if this solution will work for you. If not, let me know and I am happy to assist further smile

Cheers, Dave


Hi, Dave!

Thank you so much for your kindness and help! smile I will try this out and let you know if it works.

Have a nice day! smile



Hi, Dave!

Me again smile It works. But now I don't know how to make HOVER EFFECT over those images, because when I use another div block to put it over images or div block "IMAGE BOX", it covers bigger area than image size.

Now it is like this

and now I want to do this...

Thank you and have a nice day! blush



Hi Špela, sorry for the delay, Could you share the site read-only link:, I am happy to take a look and find out what's happening smile

Thanks in advance! smile


Hi, Dave!

No problem blush Here is link to my website (hope I did this correctly)! smile

THANK YOU and have a nice day!


closed #7

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