Estou tentando fazer uma página onde contenham umas div
em círculos e que se ajustem uma abaixo da outra quando o layout diminuir, por exemplo, para tamanhos de celular.
Com o tamanho comum gostaria que ficassem 4 lado-a-lado e ao ir diminuindo fiquem uma abaixo da outra.
Li algo sobre media queries e estou tentando implementar, mas caso alguém conheça e pudesse me ajudar com algo.
Também não consigo deixar um pouco de espaço entre as div
.
Segue o código que estou usando no momento:
.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>