Square div block

I’ve got a div block where I’ve dropped in categories.

How do I ensure that this div block is a square, regardless of the amount of content in the div block, or the size of the sceen?


Here is my site Read-Only: https://preview.webflow.com/preview/more-like-jesus?utm_medium=preview_link&utm_source=designer&utm_content=more-like-jesus&preview=52e058379b43f99960f45d71d1090658&pageId=5fced8ede1f6e678e2eab976&mode=preview

Hi @Steve-K! You can keep those div blocks square by giving your “Div Block 38” class an equal width and height. You could use px/em or try vw for both the width and height – for example, height: 15vw and width: 15vw. Either way, you’ll need to tweak the width and height for the smaller screen sizes.

I hope that helps!

1 Like

@Steve-K Just chiming in, another solution is to use Padding-top property. This will automatically keep the ratio of the div to square and responsive. Set your position:relative, width to 100%, height auto/default and add Padding-top 100%; Doing this will cause the inner element to be pushed down, you will need to add position: absolute.

This should help: https://css-tricks.com/aspect-ratio-boxes/

3 Likes