DEV Community

Cover image for Responsive square, HOW ? πŸ€”, here's the solution !
Moulun Kevin
Moulun Kevin

Posted on

Responsive square, HOW ? πŸ€”, here's the solution !

The problem

I've always got some design ideas for galleries in a grid form, but it always required square cover, the only problem was that it wasn't really responsive if I was fixing a height and width in px, but doing the same with % em rem was a nightmare until now

the solution

Alt Text

The solution is quite simple when you think of it, if we take a div with a width in percentage then we apply a padded bottom on a:: after pseudo element, The padding is basing it’s width from the parent container, so when we set padding-bottom to 100%, it basically means 100% of its width, so with this you get a responsive square

I hope this post helped you with this struggle πŸ‘

Top comments (2)

mrkbr profile image
Mario Kober

If you can use vw for width you can make it even simpler.
width 25vw
height 25vw

atndesign profile image
Moulun Kevin

Oh yeah did not think of that, that is a good solution! Thanks for sharing it