Quando si utilizzano i design predefiniti, il sistema applicherà diversi breakpoint al passaggio da dispositivo mobile a tablet e desktop. I breakpoint sono:

Minimo

• Dimensioni dello schermo inferiori a 321px di larghezza o 321px di altezza
• La dimensione del carattere è impostata su 0,38
• L'altezza della riga è impostata a 1,05 em
• Il riempimento della casella è ridotto a 5px
• Dimensioni dello schermo inferiori a 450×450: il riquadro viene ridimensionato al 100%100%

Mobile: Verticale

• Dimensioni dello schermo inferiori a 480px di larghezza e 926px di altezza
• Larghezza del riquadro estesa al 100% e altezza minima di 300px
• I pulsanti sono posizionati sotto il contenuto
• Il logo è nascosto
• Il riempitivo è ridotto
• Aggiunta: se le dimensioni dello schermo sono inferiori a 414×736 o 736×414 (ad es. iPhone 6/7/8), il riempimento del riquadro viene ridotto

Mobile: orizzontale

• Dimensioni dello schermo inferiori a 926px di larghezza e 480px di altezza
• Larghezza del riquadro estesa al 100% e altezza minima di 150px
• I pulsanti sono posizionati sul lato destro del contenuto con una larghezza di 250px
• Il logo è nascosto
• Il riempitivo è ridotto
• Aggiunta: se le dimensioni dello schermo sono inferiori a 414×736 o 736×414 (ad es. iPhone 6/7/8), il margine della casella viene ridotto

Desktop e tablet

• Dimensioni dello schermo superiori a 926×480 o 480×926

Media query aggiuntive

Livelli posizionati come "in basso/a tutta larghezza", "in alto/a tutta larghezza" e "Spingi verso il basso":

• Larghezza massima 1500px: il contenuto (titolo, testo e finalità) del layer di consenso verrà ridotto a "100% – 450px" per consentire la visualizzazione dei pulsanti sul lato destro del contenuto.
• Larghezza massima 1200px: il contenuto (titolo, testo e finalità) del layer di consenso verrà ridotto a "100% – 250px" per consentire la visualizzazione dei pulsanti sul lato destro del contenuto. Questo
• Larghezza massima 800px: il contenuto (titolo, testo e finalità) del layer di consenso verrà espanso al 100% per consentire la visualizzazione dei pulsanti sotto il contenuto.

Livelli posizionati come "in basso/a destra", "in basso/al centro", "al centro" e "in alto/al centro":

• Larghezza massima 600px: il riquadro viene ridimensionato al 100% della larghezza.

Livelli posizionati come "middle/center":

• Altezza massima 600px e larghezza minima 926px: il riquadro viene ridimensionato a tutta altezza e il contenuto è impostato su flex con overflow auto per evitare che il riquadro risulti troppo alto per la finestra.

Livelli posizionati come "destra/altezza intera" e "sinistra/altezza intera":

• Larghezza massima 400px: il riquadro viene ridimensionato al 100% della larghezza.

Pagina delle impostazioni personalizzate:

• Larghezza massima 570px: la navigazione è stata spostata in alto per dare spazio sufficiente al contenuto