Buongiorno, sto realizzando un sito responsive (uso Bootstrap), ma ho un problema su un elemento.
Questa la parte di sito interessata:
desktop.jpg
Su mobile la sezione si comporta così:
mobile.jpg
Io vorrei che l'icona con la foto di ogni persona rimanesse sempre a sinistra, anche in presenza di un nome molto lungo.
Al momento icona e testi sono in due div separati con proprietà float:left.
Avrei usato col-xs-1 (o 2) e col-xs-10 (o 11) ma su desktop la colonna contenente le icone/foto diventa troppo larga.
Questo il codice di una sezione:
codice:<div class="row"> <div class="colonna col-sx"> <img class="profile-pic" src="img/foto.jpg"> </div> <div class="colonna col-dx"> <p class="testo-tipo-1">Nome Cognome <small class="text-muted"> <br class="visible-xs"><a href="#"> dettagli</a></small><br> <span class="testo-piccolo">testo piccolo</span></p> <p> <span class="testo-tipo-2 text-uppercase">gruppo </span> </p> <button type="button" class="bottone"><small>bottone ></small></button> </div> </div>
Come posso procedere per far si che l'icona/foto rimanga sempre a sinistra del blocco di testo anche su viewport strette?
[edit] ho fatto confusione scrivendo il titolo: NON voglio che vada a capo. Il titolo del thread dovrebbe essere "Evitare che un div con proprietà float vada a capo". Scusate... ^^;

Rispondi quotando