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:

HTML:

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

CSS:

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