DEV Community

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

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

atndesign profile image Moulun Kevin ・1 min read

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 πŸ‘

Discussion (2)

Collapse
mrkbr profile image
Mario Kober

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

Collapse
atndesign profile image
Moulun Kevin Author

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

Forem Open with the Forem app