Sto creando un layout responsive ma ho un paio di problemi di visualizzazione.
Invio le immagini così capite meglio:
1.jpg
2.jpg
Praticamente vorrei che fra le varie colonne ci sia un po' di spazio e che quando si passa alla visione tablet le due colonne siano centrate e non allineate a sinistra!
Questo è il mio codice. Uso bootstrap:
codice HTML:
<div class="container py-0">
<center>
<div class="container pb-2 pt-3 px-3">
<div class="row mx-md-n2">
<div class="border border-secondary shadow-sm p-0 mb-2 bg-muted rounded-lg col-xs-12 col-sm-12 col-md-5 col-lg-2">
<div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight-bold">Titolo</div><img src="images/occhio-di-gatto.jpg" class="flex"><div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight">Riassunto</div></div>
<div class="border border-secondary shadow-sm p-0 mb-2 bg-muted rounded-lg col-xs-12 col-sm-12 col-md-5 col-lg-2">
<div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight-bold">Titolo</div><img src="images/occhio-di-gatto.jpg" class="flex"><div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight">Riassunto</div></div>
<div class="border border-secondary shadow-sm p-0 mb-2 bg-muted rounded-lg col-xs-12 col-sm-12 col-md-5 col-lg-2">
<div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight-bold">Titolo</div><img src="images/occhio-di-gatto.jpg" class="flex"><div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight">Riassunto</div></div>
<div class="border border-secondary shadow-sm p-0 mb-2 bg-muted rounded-lg col-xs-12 col-sm-12 col-md-5 col-lg-2">
<div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight-bold">Titolo</div><img src="images/occhio-di-gatto.jpg" class="flex"><div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight">Riassunto</div></div>
<div class="border border-secondary shadow-sm p-0 mb-2 bg-muted rounded-lg col-xs-12 col-sm-12 col-md-5 col-lg-2">
<div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight-bold">Titolo</div><img src="images/occhio-di-gatto.jpg" class="flex"><div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight">Riassunto</div></div>
<div class="border border-secondary shadow-sm p-0 mb-2 bg-muted rounded-lg col-xs-12 col-sm-12 col-md-5 col-lg-2">
<div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight-bold">Titolo</div><img src="images/occhio-di-gatto.jpg" class="flex"><div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight">Riassunto</div></div>
</div>
</div>
</center>
</div>