kljhk jhkh kljhk jhkh - 3 months ago 8
CSS Question

Cant keep the square size equal - bootstrap

I have a simple square block:

.coverw-block-welcome{
height: 27vh;
background-color: #1b6d85;
margin:5px;
margin-top: 15px;
border-radius: 4px 4px 4px !important;
}


And i make the position with the next class:

col-xs-6 col-sm-3


The issue is when I make the screen smaller in the width then the height.
In that situation, the square become a rectangle.

There is a way to keep the proportions of the square even if I reduce the size of the height or the width?

Answer

This is because you don't have a specified width to your square, that is why it becomes a rectangle. Take a look at this code snippet.

.coverw-block-welcome{
  height: 27vh;
  width: 27vh;
  background-color: #1b6d85;
  margin:5px;
  margin-top: 15px;
  border-radius: 4px 4px 4px !important;
}
<div class="coverw-block-welcome"></div>

Comments