Streaming live at 10am (PST)

How to keep square ratio of a div when resizing browser


I have an issue with a specific layout I need… basically, I want 3 perfect square divs horizontally next to each other that have two headings inside of them (one towards the top and one towards to the bottom of each div) and when you hover the square, the two headings fade out, the background color changes and then a new text/paragraph appears in the center of the square div.

I managed to get the animation I need by adding multiple interactions to the square div (basically, I made the two headings text color white and on hover change to black font color, and also made the background color of the div to black on hover, while I did the reverse for the paragraph text that should fade in on hover with opacity).

However, my issue is keeping the square size of the divs. I read you need to have 100% width and then also add 100% top-padding to the div, but once I add text to the div, it keeps messing up the square. Especially the paragraph text that is ‘hidden’ with opacity and only appears on hover, keep messing up the square ratio.

Can anyone help me with this? Would very much appreciate the help!

Read only link below, just scroll down to the 3 red divs. I added the interactions/animations I need to the first one already

Here is my site Read-Only:
(how to share your site Read-Only link)


  width: 33vw;
  height: 33vw;

**use vw for width and height (Not vh).

Awesome, that worked! Thanks so much!