I'm currently working on creating a responsive fluid div that maintains its square shape as the page is resized. I've come across a method that involves using the following CSS code:
div{
width:25%
padding-bottom:25%;
}
However, it seems that this only works with the default box-model layout. Is there a way to achieve the same result while using
box-sizing: border-box;
If you'd like to see my current html structure in action, feel free to visit my Code Pen here: Code Pen