46 258
contributi
# Spostare mini sprite e nome nella stessa cella. Quindi via eventuali <code>colspan="2"</code> dall'header. Questo è necessario per accorpare mini sprite e nome nel layout mobile.
# Wrappare mini sprite e nome in un <code><div class="flex flex-row flex-nowrap flex-items-center></code> (qui è dove concretamente vengono accorpati) e il nome in uno <code><span class="flex-item-fill"></code>. Così facendo, lo <code>span</code> contenente il nome si allarga ad occupare tutto lo spazio disponibile nella colonna, spingendo il mini sprite all'estrema sinistra: dato che i mini sprite hanno tutti la stessa larghezza, l'effetto visivo è che sembrano incolonnati. Il testo dentro lo <code>span</code> del nome è generalmente centrato dal fatto che l'intera tabella ha il testo centrato, ma in caso non lo fosse, basta aggiungere la classe CSS <code>text-center</code>.
# Aggiungere la classe <code>block-''xx''</code> (laddove <code>''xx''</code> è il breakpoint a cui la riga della tabella non è più una riga) al wrapper di mini sprite e nome, e <code>style="padding-
Un esempio? La riga di Jynx nella tabella di desktop di questo stesso tutorial ;D (ignorare la parte del coloramento <code>peachpuff</code>, ovviamente).
|