Quindi vuoi creare un layout a colonne responsive con Divi 5?

E magari vuoi anche evitare di litigare con colonne che sul desktop sembrano perfette e poi su mobile fanno di testa loro? Bene, hai trovato pane per i tuoi denti.

Quando riesci a gestire bene un layout a colonne responsive in Divi 5, lavori meglio, perdi meno tempo e smetti di sistemare a mano cose che dovrebbero adattarsi da sole. In questo, fortunatamente, ci viene in aiuto flexbox.

Flexbox è un sistema di impaginazione CSS che decide come gli elementi si dispongono e si allineano dentro una pagina.

Pensa a una scatola con dentro vari oggetti: Flexbox ti permette di scegliere se questi oggetti devono stare in fila, in colonna, centrati oppure distribuiti in modo uniforme, senza dover scrivere regole complicate.

Divi integra questo sistema direttamente nel suo editor visuale, così puoi gestire la struttura della pagina con semplici clic e ottenere layout che si adattano automaticamente a schermi di qualsiasi dimensione.

In questo articolo vedrai come usare il sistema Flexbox di Divi per costruire layout flessibili, ordinati e capaci di adattarsi da soli a qualsiasi schermo, dal computer allo smartphone.

Ti mostrerò come configurarlo dentro il builder visuale di Divi, quali sono le funzioni principali e seguiremo anche un tutorial pratico passo dopo passo.

Pronti? Via!

Direzione, disposizione e allineamento delle colonne in Divi

Quando lavori con le colonne in Divi, ci sono quattro proprietà CSS che determinano il comportamento visivo del layout: direzione, a capo, distribuzione e allineamento.

Capire come si influenzano tra loro è il punto di partenza per controllare davvero il modo in cui i contenuti si dispongono e si adattano quando cambia la dimensione dello schermo.

• Direzione — stabilisce l’asse lungo cui gli elementi vengono distribuiti: in orizzontale, quindi su una riga, oppure in verticale, cioè in colonna. Per esempio, se imposti la direzione su colonna, i blocchi si impilano uno sotto l’altro invece di restare affiancati.
• A capo — definisce se gli elementi devono andare a capo su una nuova riga quando lo spazio finisce, oppure se devono restare compressi su un’unica riga. Con l’a capo attivo, tre colonne su uno schermo stretto possono distribuirsi automaticamente su due righe invece di stringersi fino a diventare difficili da leggere.
• Distribuzione — controlla come viene gestito lo spazio tra gli elementi e intorno agli elementi lungo l’asse principale. Per esempio, puoi scegliere se distribuire i blocchi con spazio uniforme tra loro oppure raggrupparli tutti a sinistra.
• Allineamento — regola la posizione degli elementi sull’asse perpendicolare a quello principale. Se gli elementi sono disposti in orizzontale, questa proprietà decide se si allineano in alto, al centro o in basso.

Queste quattro proprietà lavorano insieme.

E sì, a volte fanno anche un po’ di casino (io pure ogni tanto faccio casino con tutte le possibilità che ci sono).

Se modifichi la direzione, per esempio, cambia automaticamente anche il significato di distribuzione e allineamento. Nei paragrafi che seguono ti faccio vedere come configurarle in Divi in modo pratico e coerente per ogni punto di interruzione.

L’approccio classico di Divi si basa su un sistema a griglia con stili configurabili per ogni dispositivo.

Il nuovo approccio con il sistema di layout flessibile parte da quella stessa base, ma ti lascia molta più libertà nella gestione delle colonne e degli elementi, sempre senza dover scrivere codice.

Ecco il confronto delle differenze principali:

Flexbox si basa su una relazione genitore-figlio: in Divi, la riga fa da contenitore flessibile, cioè il genitore, mentre le colonne sono gli elementi al suo interno, cioè i figli.

Questa struttura è integrata direttamente nel builder visuale e le impostazioni di layout si trovano nel pannello Progettazione di ogni riga.

Riga = contenitore flessibile: vai su Progettazione > Layout > Flex. Questa opzione è attiva per impostazione predefinita quando scegli una struttura a riga con layout flessibile.

La riga gestisce la spaziatura, l’allineamento e il flusso degli elementi su tutti i dispositivi.

Colonne = elemento flessibile: puoi aggiungere tutte le colonne che vuoi a una riga, senza dover scegliere per forza tra layout predefiniti.

Ogni colonna può espandersi per occupare lo spazio disponibile, restringersi per adattarsi al contenuto oppure mantenere una larghezza fissa. Per esempio, in una riga con tre colonne puoi fare in modo che la prima occupi metà dello spazio e che le altre due si dividano automaticamente il resto.

Le impostazioni relative si trovano nella scheda Dimensioni.

Questi quattro controlli — Direzione flessibile, Ritorno a capo, Allineamento orizzontale e Allineamento verticale — si trovano nelle impostazioni di Layout e sono il cuore della gestione responsive delle colonne.

Direzione del layout è la base di ogni contenitore Flexbox in Divi, perché decide in che direzione vengono disposti gli elementi al suo interno.

Pensa a una fila di libri su uno scaffale: puoi metterli da sinistra a destra, da destra a sinistra oppure impilarli uno sopra l’altro.

Le opzioni disponibili sono quattro: Riga (orizzontale, da sinistra a destra), Riga inversa (orizzontale invertita, da destra a sinistra), Colonna (verticale, dall’alto verso il basso) e Colonna inversa (verticale invertita, dal basso verso l’alto).

L’impostazione predefinita è Riga, che corrisponde al classico layout a colonne affiancate.

Questa impostazione controlla direttamente la proprietà CSS flex-direction.

Nella pratica, la maggior parte dei designer mantiene la direzione riga sugli schermi grandi e imposta la direzione colonna sugli schermi più piccoli, come tablet e smartphone, per ottenere un layout verticale più pulito e più comodo da usare su mobile.

Giustifica contenuto, cioè la distribuzione del contenuto, controlla come lo spazio extra viene suddiviso tra gli elementi lungo l’asse principale del layout flessibile.

Il valore predefinito è Inizio, che posiziona tutti gli elementi a partire dal punto iniziale dell’asse. Con la direzione Riga, gli elementi si dispongono da sinistra a destra. Con la direzione Colonna, invece, si impilano dall’alto verso il basso.

Per esempio, se hai tre pulsanti in una riga e vuoi distribuirli in modo uniforme con lo stesso spazio tra uno e l’altro, ti basta cambiare Giustifica contenuto da Inizio a Spazio tra.

• Inizio: tutti gli elementi si allineano verso il bordo iniziale, quindi a sinistra o in alto.
• Centro: gli elementi vengono raggruppati e centrati lungo l’asse principale.
• Fine: tutti gli elementi vengono spinti verso il bordo finale, quindi a destra o in basso.
• Spazio tra: il primo elemento parte dal bordo iniziale, l’ultimo arriva al bordo finale. Lo spazio rimanente viene distribuito in modo uniforme tra gli elementi.
• Spazio attorno: ogni elemento riceve uno spazio uguale su entrambi i lati, bordi compresi.
• Spazio uniforme: lo spazio viene distribuito in modo matematicamente uguale dappertutto: prima del primo elemento, tra gli elementi e dopo l’ultimo.

Allinea elementi controlla come gli elementi si dispongono lungo l’asse secondario del contenitore, cioè la direzione perpendicolare a quella in cui scorrono i blocchi.

Pensa a una fila di scatole su un ripiano: Allinea elementi decide se queste scatole toccano tutte il fondo, stanno allineate in alto oppure si centrano a metà del ripiano.

In Divi, questa impostazione ti permette di ottenere un allineamento verticale preciso e colonne che restano della stessa altezza, senza dover intervenire a mano.

Per impostazione predefinita, Divi assegna a questa proprietà il valore Adatta, che forza ogni elemento a espandersi fino a occupare l’intera altezza — quando gli elementi sono disposti in riga — oppure l’intera larghezza — quando sono disposti in colonna — del contenitore.

Ed è proprio per questo che le schede con quantità di testo diverse appaiono tutte della stessa altezza quando il contenitore viene impostato come flessibile.

• Adatta: gli elementi si espandono fino a corrispondere all’altezza o alla larghezza del fratello più grande. È la soluzione classica per ottenere colonne della stessa altezza.
• Inizio: tutti gli elementi si allineano in alto quando la direzione è orizzontale, cioè a riga, oppure a sinistra quando è verticale, cioè a colonna.
• Centro: gli elementi si centrano verticalmente in direzione orizzontale oppure orizzontalmente in direzione verticale.
• Fine: tutti gli elementi si allineano in basso in direzione orizzontale oppure a destra in direzione verticale.

Disposizione a capo del layout controlla cosa succede quando gli elementi di una riga non ci stanno più tutti.

Per capirlo, pensa a una mensola: se ci metti troppi libri, a un certo punto non entrano più. A quel punto o escono fuori, oppure li comprimi così tanto che non si capisce più niente.

Con Flexbox succede qualcosa di molto simile.

Per impostazione predefinita, tutti gli elementi vengono tenuti su un’unica riga, cioè senza a capo. Se lo spazio finisce, gli elementi si restringono, escono dal bordo o vengono tagliati.

Se invece attivi la disposizione a capo del layout, cambi completamente comportamento: gli elementi che non ci stanno più vanno automaticamente a capo, si distribuiscono su più righe e il layout diventa adatto a qualsiasi schermo, senza bisogno di aggiungere nuove sezioni.

• Senza a capo: tutti gli elementi restano su una sola riga, anche se lo spazio è poco. È l’impostazione predefinita e va bene quando vuoi un numero fisso di colonne che non si spostano.
• A capo automatico: quando gli elementi non entrano più nella stessa riga, scorrono automaticamente su quella successiva, proprio come le parole in un testo. Se la direzione è verticale, cioè a colonna, scorrono nella colonna successiva. Esempio pratico: una galleria con 6 schede su computer può diventare 2 righe da 3, e su mobile impilarsi in una sola colonna.
• A capo invertito: funziona come A capo automatico, ma le nuove righe compaiono sopra le precedenti invece che sotto, oppure a sinistra se la direzione è Colonna. È utile quando vuoi invertire l’ordine visivo senza toccare il codice.

Configurare il sistema di layout flessibile, cioè Flexbox, in Divi è abbastanza semplice.

Ecco una guida passo dopo passo per costruire un layout adattivo che si ridispone automaticamente sugli schermi più piccoli, come quelli degli smartphone.

Aggiungi una nuova sezione nel builder visuale. Quando compare la finestra di inserimento, puoi scegliere uno dei modelli Flex disponibili: colonne uguali, colonne sfalsate, più righe o più colonne.

Scegli una riga a colonna singola per iniziare in fretta.

Poi, nella scheda Contenuto della riga, espandi la sezione Elementi e clicca sull’icona di duplicazione per aggiungere altre colonne.

Aggiungi altre 5 colonne alla riga.

Queste saranno gli elementi flessibili, cioè i singoli blocchi che si dispongono automaticamente nello spazio disponibile all’interno della riga.

A questo punto aggiungi un modulo Immagine, Testo e Pulsante in ogni colonna e personalizzalo in base alle tue esigenze.

Con le impostazioni della riga aperte, vai nella scheda Progettazione.

Assicurati che Flex sia abilitato nelle impostazioni di Stile layout.

Per prima cosa, regola il gap orizzontale della riga.

Il valore predefinito è 5,5%. Puoi portarlo a 3% o 4% in base a come vuoi far respirare il layout. Mentre cambi il valore, lo spazio orizzontale tra ogni colonna si aggiorna subito.

Lascia pure tutte le altre impostazioni predefinite, ma abilita la disposizione a capo del layout.

Questa opzione permette agli elementi di spostarsi sulla riga successiva quando lo spazio non basta più, così il risultato resta ordinato e uniforme.

Per fare in modo che il layout funzioni bene su ogni dispositivo, usa i punti di interruzione responsive personalizzabili di Divi e applica le modifiche che servono in ciascun caso.

Puoi passare da un punto di interruzione all’altro direttamente dalla barra di anteprima di Divi 5: Computer (≥1024px), Tablet (768–1023px) e Smartphone (≤767px).

Per ciascuno puoi impostare una flex-direction indipendente. Per esempio: row su computer per mantenere le colonne affiancate, e column su smartphone per impilare i moduli in verticale.

Le modifiche applicate a un punto di interruzione più piccolo non sovrascrivono quelle del punto di interruzione superiore.

Quindi ogni livello mantiene le proprie impostazioni.

Comodo, no?

Anche la spaziatura verticale, il cosiddetto gap, cioè lo spazio tra gli elementi disposti in riga o in colonna, può essere ridotta sui dispositivi più piccoli.

Questo evita che il layout risulti troppo dispersivo su schermi stretti.

Divi ti permette anche di ristrutturare facilmente le righe flessibili per i dispositivi con schermo più piccolo.

La funzione Applica struttura modello consente di creare layout adattativi con un solo clic. Dalla scheda Contenuto della riga, fai clic sul pulsante corrispondente per applicare strutture di colonna diverse nei vari punti di interruzione, cioè nelle soglie di larghezza dello schermo in cui il layout cambia.

Una volta cliccato, Divi 5 mostra le opzioni disponibili per la riga flessibile.

Per esempio, puoi passare da un layout a 3 colonne a uno a 2 colonne sul punto di interruzione per tablet medi, ottenendo una visualizzazione più adatta a questi dispositivi intermedi.

In Divi 5, l’ordinamento personalizzato delle colonne ti permette di cambiare l’ordine in cui le colonne vengono mostrate nei layout per schermi di dimensioni diverse, senza nascondere elementi e senza scrivere codice aggiuntivo.

Per esempio, su computer puoi avere un’immagine a sinistra e il testo a destra, ma su smartphone spesso ha più senso mostrare prima il testo e poi l’immagine.

Con questa funzione puoi farlo direttamente dalle impostazioni, senza toccare la struttura della pagina.

L’ordinamento delle colonne ti consente quindi di cambiare la loro sequenza su tablet e smartphone, mantenendo un layout coerente su ogni dispositivo.

Seleziona la prima colonna dentro una riga, vai nella scheda Contenuto e apri le impostazioni di Ordine.

Imposta l’ordine di visualizzazione della prima colonna su 1 e lascia la seconda colonna a 0.

Sugli schermi piccoli, questo sposta la prima colonna sotto la seconda. In pratica, se hai due colonne — testo a sinistra e immagine a destra — impostando l’ordine della colonna del testo a 1, su smartphone l’immagine apparirà prima e il testo dopo.

Tutto questo senza scrivere CSS, senza nascondere elementi e senza duplicare righe.

Ordine visivo e accessibilità nelle colonne responsive

Quando modifichi l’ordine delle colonne sui dispositivi mobili, c’è una cosa importante da tenere a mente: l’ordine visivo e l’ordine del codice sorgente possono non coincidere.

E questa differenza ha effetti reali su due aspetti che spesso passano in secondo piano: la navigazione da tastiera e la lettura tramite screen reader.

Chi naviga usando la tastiera segue l’ordine del DOM, non quello visivo.

Quindi, se una colonna viene spostata visivamente in cima su mobile ma nel codice resta seconda, chi usa solo il tasto Tab la raggiungerà dopo. Il risultato è un’esperienza poco coerente rispetto a quello che si vede sullo schermo.

Lo stesso discorso vale per i lettori di schermo usati da persone con disabilità visive: questi strumenti leggono il contenuto nell’ordine in cui compare nel markup HTML.

Un riordino solo visivo, quindi, non viene percepito allo stesso modo.

Per gestire bene queste situazioni:

• Valuta se il contenuto ha un ordine logico naturale che dovrebbe essere mantenuto anche nel codice.
• Quando possibile, struttura il markup nell’ordine che ha più senso a livello semantico, usando il riordino visivo solo come rifinitura estetica.
• Testa il layout navigando con il tasto Tab, così puoi verificare se il flusso è davvero coerente.
• Su mobile, scorri il contenuto senza lasciarti guidare dal design visivo, in modo da simulare l’esperienza di un lettore di schermo.

Richiedono pochi minuti, ma queste verifiche fanno una differenza reale per l’accessibilità del sito.

Un layout responsive ben costruito non si limita ad adattarsi agli schermi: deve funzionare bene per tutti gli utenti, indipendentemente da come accedono al contenuto.

Problemi comuni con il comportamento delle colonne: cause e soluzioni rapide

Se le colonne non si comportano come ti aspetti su smartphone o tablet, nella maggior parte dei casi il problema dipende da una configurazione specifica che sta bloccando il comportamento adattivo.

Vediamo i casi più frequenti e come sistemarli in fretta.

• Impilamento delle colonne disabilitato: se le colonne non si dispongono una sopra l’altra su mobile, controlla che l’opzione di impilamento sia attiva a livello di riga. Senza questa impostazione, le colonne restano affiancate anche sugli schermi stretti.
• Larghezza minima delle colonne troppo elevata: un valore di larghezza minima impostato nel CSS o nelle opzioni di layout può impedire alle colonne di restringersi correttamente. Rimuovilo oppure abbassalo per la visualizzazione mobile.
• Larghezza dei moduli interni fissa: i moduli inseriti nelle colonne che hanno una larghezza impostata con un valore fisso possono rompere il layout. Controlla le impostazioni di larghezza specifiche per ogni dispositivo.
• Larghezza massima della riga troppo ridotta: una riga con una larghezza massima limitata può comprimere le colonne in modo inatteso. Verifica il valore impostato per ogni dimensione dello schermo.
• Spazio tra le colonne eccessivo: se la distanza orizzontale tra le colonne è troppo grande rispetto allo spazio disponibile, le colonne potrebbero andare a capo prima del previsto o addirittura sovrapporsi. Riduci questo valore nella visualizzazione mobile.
• Ordine delle colonne applicato alla dimensione dello schermo sbagliata: se hai modificato l’ordine visivo delle colonne, assicurati che le impostazioni siano salvate per la dimensione dello schermo corretta. Un ordine definito solo su computer non si propaga automaticamente alla visualizzazione mobile.

Se dopo questi controlli il problema resta, allora vale la pena verificare se ci sono stili CSS personalizzati che stanno sovrascrivendo le impostazioni responsive del builder.

Ulteriori problemi con le colonne responsive in Divi

Oltre ai casi appena visti, ci sono alcune situazioni più specifiche che possono generare comportamenti inattesi nel layout a colonne.

Qui sotto trovi gli scenari meno comuni, con indicazioni pratiche per risolverli.

Altezze diseguali tra colonne

Se le colonne appaiono con altezze diverse su computer ma dovrebbero allinearsi visivamente, verifica che l’allineamento verticale sia impostato in modo coerente su tutte le colonne della riga.

Su mobile, questo problema spesso scompare da solo, perché le colonne si impilano una sotto l’altra.

Contenuto che fuoriesce dai bordi

Questo succede quando un elemento interno — per esempio un’immagine o un blocco di testo — ha dimensioni fisse che superano la larghezza della colonna sugli schermi piccoli.

In questi casi usa larghezze in percentuale oppure imposta la larghezza massima al 100% sugli elementi interni, così restano dentro i bordi del layout.

Le colonne non si impilano correttamente ai vari punti di interruzione

Se le colonne non si dispongono correttamente tra computer, tablet e smartphone, controlla la struttura della riga e il numero di colonne impostate.

I layout complessi o le colonne annidate possono richiedere un intervento manuale sulle impostazioni responsive a ogni livello.

Se ti capita un comportamento che non rientra in questi scenari, scrivimi: spesso è una combinazione di impostazioni che si sovrascrivono tra loro.

Il sistema di layout flessibile di Divi 5 è potente, ma come succede con qualsiasi strumento, rende al meglio quando lo usi con criterio.

In questa sezione trovi alcune buone pratiche per costruire layout più veloci da gestire, più puliti e più adattabili a tutti gli schermi.

Inizia semplice, poi affina per dispositivo: configura il layout nella vista computer.

Imposta la direzione degli elementi, il modo in cui vengono distribuiti orizzontalmente, il loro allineamento verticale e se possono andare a capo. Lascia pure i valori predefiniti dove non serve cambiare nulla.

Per esempio, le altezze uguali tra le colonne e l’allineamento iniziale sono già attivi di default.

Intervieni sui punti di interruzione, cioè sui momenti in cui il layout cambia per tablet e smartphone, solo quando qualcosa non funziona davvero su uno schermo più piccolo.

Meno impostazioni personalizzate accumuli, più il sito resta leggero e facile da mantenere.

Lascia che Flexbox faccia il lavoro pesante: non duplicare le righe e non usare le impostazioni di visibilità per gestire i dispositivi piccoli, se non è strettamente necessario.

Usa invece l’opzione di disposizione automatica degli elementi, cioè l’A capo automatico, oppure l’ordine delle colonne.

Per esempio, invece di creare due righe separate — una per computer e una per mobile — puoi usare una sola riga con A capo automatico attivo: su computer le colonne restano affiancate, su mobile vanno a capo da sole.

Meno sezioni significa prestazioni migliori e aggiornamenti molto più semplici.

Usa spaziature realistiche: i valori predefiniti per le spaziature orizzontali e verticali sono abbastanza generosi per un motivo preciso.

Sugli schermi piccoli, riducili leggermente invece di comprimere tutto. Abbina questa scelta a una larghezza minima sulle colonne, in Dimensioni > Larghezza > Larghezza minima, così il testo rimane leggibile.

Sapere quando passare alla griglia CSS: Flexbox è perfetto quando devi organizzare elementi in una sola direzione, quindi o in riga o in colonna.

Quando invece hai bisogno di controllare contemporaneamente righe e colonne — per esempio per sovrapporre elementi, creare layout a mosaico o posizionare contenuti con maggiore precisione — allora è il momento di usare il sistema a griglia CSS offerto da Divi.

Per esempio: una barra di navigazione con icone affiancate è un caso ideale per Flexbox.

Una pagina con intestazione, barra laterale e area contenuto distribuiti in una griglia precisa, invece, richiede la griglia CSS.

Pattern di layout responsive più comuni con Divi

Una volta capito il meccanismo con cui le colonne si riorganizzano, è utile conoscere anche le configurazioni che ricorrono più spesso nei progetti reali.

Sono pattern che tornano di continuo, quindi vale la pena averli chiari prima ancora di iniziare a costruire la pagina.

• Schede 3→2→1: tre colonne su computer, due su tablet, una su mobile. È il layout più diffuso per griglie di servizi, articoli o portfolio. Funziona bene quando ogni scheda ha più o meno lo stesso peso visivo.
• Griglia icona + testo: quattro o tre colonne su computer che collassano a due su tablet e una su mobile. È adatta per sezioni con funzionalità o vantaggi, dove ogni elemento unisce un’icona a una breve descrizione.
• Impilamento alternato immagine/testo: due colonne che si invertono di riga in riga su computer e diventano un singolo impilamento verticale su mobile. Qui serve un po’ di attenzione in più all’ordine degli elementi quando passi alla visualizzazione a colonna singola.
• Riquadri CTA ad altezza uniforme: due o tre colonne con pulsante allineato in basso. Per mantenere l’altezza uniforme tra le colonne, è utile impostare Allinea elementi su Adatta a livello di riga e gestire il posizionamento del pulsante con un modulo interno configurato di conseguenza.

Questi layout coprono buona parte dei casi reali.

La logica dei punti di interruzione resta la stessa in tutti gli scenari: prima definisci il comportamento su computer, poi adatti colonna per colonna i punti di interruzione inferiori, senza stravolgere la struttura di base.

L’integrazione nativa di Flexbox, cioè del sistema moderno di allineamento dei browser, cambia davvero il modo di lavorare con le colonne in Divi.

Quello che prima richiedeva CSS personalizzato, sezioni duplicate o componenti aggiuntivi adesso si può gestire direttamente dal builder visuale in pochi passaggi. Il riposizionamento automatico degli elementi, l’allineamento verticale preciso e il riordinamento dei moduli ai vari punti di interruzione funzionano in modo coerente e prevedibile.

Il risultato pratico è semplice: meno tempo perso nello sviluppo, codice più pulito e strutture di pagina che si adattano correttamente a ogni dispositivo, senza correzioni manuali dell’ultimo minuto.

Hai un layout che non si comporta come vorresti sui dispositivi mobili?

La gestione delle colonne adattive è uno degli aspetti più sottovalutati quando si costruisce un sito con Divi.

Un layout che su computer sembra perfetto può diventare scomposto, stretto o poco leggibile su smartphone. E molto spesso il problema non è il contenuto, ma la struttura delle colonne e il modo in cui sono state impostate.

Se stai lavorando a un progetto e noti comportamenti strani nel modo in cui le colonne si ridispongono sui vari schermi, ecco alcuni punti da controllare prima di buttarti su soluzioni più complesse:

• Le colonne si impilano nell’ordine corretto su mobile? L’ordine visivo può essere diverso da quello strutturale.
• Spaziature interne ed esterne, cioè padding e margini, sono state impostate separatamente per computer, tablet e smartphone oppure stanno ereditando valori pensati solo per schermi grandi?
• Le larghezze personalizzate delle colonne funzionano anche sugli schermi piccoli oppure causano uno scorrimento orizzontale indesiderato?
• Il punto di rottura, cioè il momento in cui le colonne si impilano verticalmente, corrisponde davvero alle esigenze del layout oppure è rimasto sul valore predefinito senza essere valutato?
• I moduli interni alle colonne hanno impostazioni proprie per i diversi dispositivi che entrano in conflitto con quelle della riga o della sezione?

Se preferisci un’analisi diretta del tuo layout, oppure hai un progetto in cui il comportamento su mobile non è quello previsto, scrivimi: raccontami il caso specifico e vediamo insieme cosa si può ottimizzare.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes come base.