Rendere un sito Webflow pienamente responsive: i breakpoint

Alla fine di quest’ultima lezione la tua landing page sarà pienamente responsive — tablet, landscape e portrait — e vedrai la ricompensa di aver costruito fluido fin dal primo giorno. Poiché ci siamo appoggiati a min(), clamp() ed em fin dall’inizio, la maggior parte dei breakpoint richiede solo piccoli aggiustamenti chirurgici.

Questa è la grande idea da portare a casa: la responsività è una mentalità, non una fase. Se strutturi bene i layout e usi presto le unità responsive, adattarsi agli schermi più piccoli diventa veloce e quasi noioso — nel senso migliore. Il lavoro che resta è per lo più navigazione e una manciata di trucchi Flexbox.

Chiariamo anche due cose che si sbagliano di continuo: come scorre davvero la cascata e perché i cambi strutturali si propagano su ogni breakpoint (e cosa fare invece).

Come funziona

I breakpoint di Webflow seguono una cascata. Gli stili applicati su desktop scendono verso il basso a tablet, poi landscape, poi portrait (e verso l’alto ai breakpoint più grandi se li abiliti). Su qualsiasi breakpoint più piccolo puoi sovrascrivere un valore ereditato, e l’etichetta arancione ti ricorda quando un valore arriva da un breakpoint più alto invece di essere impostato qui. È per questo che un approccio responsive-first, desktop con unità fluide, ripaga: c’è semplicemente meno da sovrascrivere.

L’avvertenza cruciale: la cascata vale per lo stile, non per la struttura. Cambia un colore o una direzione flex su tablet e resta circoscritto a tablet-e-sotto. Ma sposta un elemento nel navigator e hai cambiato l’HTML, che ogni breakpoint condivide. Quindi quando ti serve un elemento in un punto diverso su un breakpoint — diciamo il pulsante CTA dentro il menu mobile — non lo trascini. Lo duplichi e usi le combo class per mostrare una copia e nasconderne un’altra per breakpoint.

Un bagno di realtà sui breakpoint stessi: i loro intervalli (tablet ~991–768px, landscape ~767–480px, portrait sotto) hanno smesso di corrispondere ai dispositivi reali da tempo. I tablet moderni spesso si comportano come desktop; i telefoni in landscape spesso cadono nell’intervallo tablet. Quindi fai la preview alla larghezza minima di ogni intervallo per far emergere i problemi, e non fidarti delle etichette dei dispositivi.

Il resto è una cassetta di piccole mosse Flexbox: flex-wrap (più width: auto sugli item) per domare la riga di loghi in overflow; margin-top: auto su un figlio flex per fissare i link social in fondo a una card del team; invertire una direzione flex per riimpilare le colonne feature; e impostare line-breaking: normal per evitare che un titolo dropdown a no-wrap vada in overflow. Nessuna è sofisticata — ed è proprio il punto.

Come si usa

1. Rifinisci prima il desktop. Sostituisci i valori fissi rimasti con quelli responsive dove aiuta: cambia il margin inferiore del titolo della hero in 5em, imposta le immagini su width: 100% per coerenza cross-browser e passa il gap della logo-list a em. (I pixel non sono il male — tienili dove hanno senso, come il padding della navbar.)
2. Impara la cascata, poi scendi. Parti dal tablet, trascinando sempre l’handle del canvas alla larghezza minima dell’intervallo così i problemi emergono presto.
3. Tablet. Sposta il menu button perché appaia da “mobile landscape” (tre link non lo richiedono ancora); aggiungi margini laterali così la navbar non tocca i bordi; sistema i loghi in overflow con flex-wrap e width: auto.
4. Landscape. Il menu button è qui per restare — trascinalo dentro il navbar content wrapper, poi dai stile allo stato aperto del nav menu (sfondo, bordo, margin superiore, padding). Impila i feature item in verticale (direzione flex) e porta la griglia del team da tre colonne a due.
5. Portrait. Sposta il pulsante CTA nel menu mobile nel modo corretto: duplicalo, nascondi l’originale con una combo class cc-desktop-menu e rivela la copia con una combo class cc-mobile-menu (sovrascrivendo il display: none ereditato riportandolo a visibile su portrait). Porta la griglia del team a una colonna, sistema un titolo dropdown con line-breaking: normal e aggiungi padding a destra così l’icona freccia non si sovrappone mai al testo.
6. Pubblica. Clicca Publish → Publish to selected domains per spingere al dominio di staging di Webflow, dove puoi testare tutto prima di andare in produzione su un dominio personalizzato.

E questo è tutto il crash course. Sei partito da una tela bianca e hai costruito un sito completo e responsive — ora vai a clonarlo, smontalo e rendilo tuo.