CSS-breekpunten
Bij gebruik van standaardontwerpen zal het systeem verschillende breekpunten toepassen bij het schakelen tussen mobiel, tablet en desktop. De breekpunten zijn:
minimaal
- Schermgrootte onder 321px breedte of 321px hoogte
- De lettergrootte is aangepast naar 0.38
- Lijnhoogte is aangepast tot 1.05em
- De opvulling van de doos is teruggebracht tot 5px
- Schermgrootte onder 450x450: Het formaat van het vak is gewijzigd naar 100%100%
Mobiel: Portret
- Schermgrootte onder 480px breedte en 926px hoogte
- Boxbreedte uitgebreid tot 100% en minimale hoogte van 300px
- Onder de inhoud zijn knoppen geplaatst
- Logo is verborgen
- De vulling is verminderd
- Extra: Als de schermgrootte kleiner is dan 414x736 of 736x414 (bijvoorbeeld iPhone 6/7/8), wordt de opvulling van de doos verminderd
Mobiel: Landschap
- Schermgrootte onder 926px breedte en 480px hoogte
- Boxbreedte uitgebreid tot 100% en minimale hoogte van 150px
- Knoppen worden aan de rechterkant van de inhoud geplaatst met een breedte van 250px
- Logo is verborgen
- De vulling is verminderd
- Extra: Als de schermgrootte kleiner is dan 414x736 of 736x414 (bijvoorbeeld iPhone 6/7/8), wordt de opvulling van de doos verminderd
Bureaublad & tablet
- Schermgrootte boven 926x480 of 480x926
Aanvullende mediavragen
Lagen gepositioneerd als "onder/volledige breedte", "boven/volledige breedte" en "Naar beneden duwen":
- Maximale breedte 1500px: inhoud (kop, tekst en doeleinden) van de toestemmingslaag wordt verkleind naar "100% - 450px" om de knoppen aan de rechterkant van de inhoud weer te geven.
- Maximale breedte 1200px: inhoud (kop, tekst en doeleinden) van de toestemmingslaag wordt verkleind naar "100% - 250px" om de knoppen aan de rechterkant van de inhoud weer te geven. Dit
- Maximale breedte 800px: inhoud (kop, tekst en doeleinden) van de toestemmingslaag wordt uitgebreid naar 100% om de knoppen onder de inhoud weer te geven.
Lagen gepositioneerd als "onder/rechts", "onder/midden", "midden/midden" en "boven/midden":
- Maximale breedte 600px: Het formaat van het vak wordt gewijzigd naar een breedte van 100%.
Lagen gepositioneerd als "midden / midden":
- Max. hoogte 600 px en min. breedte 926 px: Het formaat van het vak wordt gewijzigd naar volledige hoogte en de inhoud wordt aangepast met automatische overloop om te voorkomen dat het vak te hoog wordt voor het venster.
Lagen gepositioneerd als "rechts/volledige hoogte" en "links/volledige hoogte":
- Maximale breedte 400px: Het formaat van het vak wordt gewijzigd naar een breedte van 100%.
Pagina met aangepaste instellingen: