Posizionamento responsive banner

[harry80]

Salve ragazzi!

Ho 6 banner affiancati in questo modo:

<div style="width:622px;">
<div style="float:left; width:76px;">Banner</div>
<div style="float:left; width:10px;">&nbsp;</div>
<div style="float:left; width:103px;">Banner</div>
<div style="float:left; width:10px;">&nbsp;</div>
<div style="float:left; width:97px;">Banner</div>
<div style="float:left; width:10px;">&nbsp;</div>
<div style="float:left; width:90px;">Banner</div>
<div style="float:left; width:10px;">&nbsp;</div>
<div style="float:left; width:136px;">Banner</div>
<div style="float:left; width:10px;">&nbsp;</div>
<div style="float:left; width:70px;">Banner</div>
</div>

Vorrei che quando ridimensiono la pagina, arrivo a 480px, quindi schermo mobile, i banner si mettessero uno sotto l'altro e al centro fra loro.

Come faccio? Stò impazzendo perché al ridimensionamento della pagina i banner rimangono in fila orizzontale sfondando il layout.

[gnerpo]

Non vorrei darti la risposta cotta e mangiata. Intanto hai impostato il contenitore principale a una larghezza fissa e quindi se diminuisce la finestra del browser ovviamente non scala! Se già metti:

<div style="width:100%">

Vedrai che otterrai un primo passo verso il risultato.

Per andare oltre hai due possibilità:

1. Usare le media queries e quindi togliere tutti i float alla risoluzione di 480px.
2. Usare Bootstrap...la soluzione più elegante e al passo con i tempi!

Fammi sapere come procede!

[harry80]

Grazie delle indicazioni!

Si, certamente voglio imparare... voglio però aggiungere una cosa, sto lavorando su WordPress ed i banner li sto mettendo in un Widget, quindi forse lavorare con Bootstrap è scomodare forse troppo codice? Media queries forse la soluzione definitiva che devo intraprendere?

Perché la funzione Stacked-to-horizontal di Bootstrap è bella, ma sarebbe interessante isolare solo quella parte di codice e non incorporare tutto il sistema Bootstrap.

Cosa ne pensi?

[gnerpo]

Mah, certamente la soluzione più rapida sarebbe usare le media queries. Comunque usare Bootstrap non ti costerebbe poi troppo e potresti usarne le potenzialità ogni volta che desideri...

[harry80]

Questa volta ho risolto con successo con le media queries, grazie del suggerimento!