AI solution for Interview Question on BFE.dev
129. how to create a responsive Square with CSS?

To create a responsive square with fixed aspect ratio using CSS, we can use the following code:

.square {
  width: 50%; /* or any other width of your choice */
  padding-bottom: 50%; /* creates a fixed aspect ratio of 1:1 */
  position: relative; /* allows us to position content within the element */
  background-color: #ccc; /* just for visualization purposes */
}

/* Optional content within the square */
.square-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

In the example above, we're setting the width of the square to 50% and then using padding-bottom with the same value to create a fixed aspect ratio of 1:1.

We're also using position: relative to allow us to position content within the square element if needed. To position content within the square, we can create a child element with position: absolute and set its top, left, bottom, and right properties to 0, and set its margin property to auto to center it.

Finally, we're using background-color: #ccc to visualize the square, but you can use any other color, image, or background property that you prefer.