How to style a div to be a responsive square using CSS

To achieve what you are looking for you can use the viewport-percentage length.This will ensure that the square remains responsive when using any device irrespective of the size.This will make your website look more professional.

Below is an example:


<div class="square">
    <h1>This is a Square</h1>


.square {
    background: #000;
    width: 50vw;
    height: 50vw;
.square h1 {
    color: #fff;