I'm trying to make a page where they contain div
in circles and adjust one below the other when layout decreases, for example, to cell sizes.
With the usual size I would like them to be side-by-side, and as they go down, stay one below the other.
I read something about media queries and I'm trying to implement it, but if anyone knows and could help me with something.
I also can not leave a little space between div
.
Here's the code I'm currently using:
.center-content {
border: solid 1px #000;
width: 100%;
}
.center-content div {
border-radius: 50%;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100px;
height: 100px;
background-color: #229922;
}
<div class="center-content">
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
<br/>
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
</div>