Ok non preoccuparti 
Potresti pensare ad una cosa del genere:
codice HTML:
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div style="clear:both;"></div>
</div>
codice:
.container {
width:100%;
margin:auto;
}
.box {
width:96%;
margin:2%;
float:left;
}
@media (min-width: 400px) {
.container {
width:350px;
}
.box {
width:98%;
margin:1%;
}
}
@media (min-width: 530px) {
.container {
width:500px;
}
.box {
width:48%;
}
}
@media (min-width: 768px) {
.container {
width:720px;
}
.box {
width:31.3%;
}
}
@media (min-width: 992px) {
.container {
width:950px;
}
.box {
width:23%;
margin:1%;
}
}
@media (min-width: 1200px) {
.container {
width:1100px;
}
}
Il contenitore avrà una larghezza fissa che cambierà in base alle varie risoluzioni (media query), i box al suo interno avranno una misura in percentuale. Ho eliminato il "position" e lasciato solo il "float".
Nell'esempio sopra riportato inizialmente avrai una griglia di 4 colonne per poi scendere a 3, poi a 2 e poi a 1.
Spero sia chiaro e semplice da capire.
Rimango a disposizione per ulteriori chiarimenti.
Buona giornata!
Rispondi quotando
Originariamente inviata da SerenaGrafic@
