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,


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 :slight_smile:

Cheers, Dave

1 Like

Hi, Dave!

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

Have a nice day! :smile:


Hi, Dave!

Me again :slight_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 :slight_smile:

Thanks in advance! :slight_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!


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