Responsive design en breakpoints

Samenvatting

Websites die je bouwt in Mach3Blocks zijn standaard responsive — ze passen zich automatisch aan het scherm van je bezoeker aan. Maar je hebt ook veel controle: je kunt de opmaak per apparaat finetunen, kolommen anders indelen per schermgrootte, blokken verbergen voor specifieke apparaten, en direct in de editor wisselen tussen apparaatweergaven.

Hoe werkt het

Breakpoints — de schermgroottes

Mach3Blocks gebruikt vijf breakpoints. Elk breakpoint staat voor een schermgrootte:

Schermformaat wisselen in de editor

De schermformaatknoppen staan in de bovenste toolbar van de editor (in het midden). Klik op een icoon om het canvas te schalen naar de bijbehorende breedte. Zo zie je direct hoe je pagina eruitziet op een telefoon, tablet of desktop.

Belangrijk: het gekozen schermformaat bepaalt ook voor welk breakpoint je opmaakinstellingen wijzigt. Stel je een lettergrootte in terwijl "Telefoon staand" actief is? Dan geldt die instelling voor het XS-breakpoint — alleen op kleine telefoonschermen.

Tip: De editor-preview kan iets afwijken van een echt mobiel apparaat vanwege pixeldichtheid. Gebruik voor een exacte mobiele test de Preview-knop of een gedeelde preview-URL.

Opmaak per apparaat instellen

Elke opmaakinstelling kun je per apparaat afzonderlijk instellen:

1. Selecteer het element
2. Open het opmaakpaneel (rechter paneel)
3. Kies het gewenste apparaat bovenin het paneel
4. Stel de waarde in

Apparaat-specifieke waarden hebben altijd voorrang op de algemene waarde.

Voorbeeld: Een heading staat op 60px voor alle apparaten. Op telefoon staand (XS) wil je 32px. Stel de algemene waarde in op 60px en stel specifiek voor XS 32px in. Op alle andere schermen blijft het 60px.

Rijen, kolommen en spanwijdtes

Blokken zijn opgebouwd uit rijen en kolommen op een 12-koloms grid. De breedte van een kolom stel je in via de spanwijdte — een getal van 1 tot 12:

De kracht van het systeem is dat je per breakpoint een andere spanwijdte kunt instellen: op desktop staan kolommen naast elkaar, op mobiel stapelen ze automatisch onder elkaar — zonder dat je aparte blokken hoeft te maken.

Vuistregel: Hoe kleiner het scherm, hoe groter de spanwijdte. Kolommen die op desktop 4/12 of 6/12 zijn, krijgen op mobiel meestal 12/12 (volledige breedte).

Kolomvolgorde per apparaat

Op mobiel kan de automatische volgorde van kolommen ongewenst zijn. Per kolom kun je een afwijkende volgorde instellen voor specifieke apparaten.

Voorbeeld: Op desktop staat een afbeelding links en tekst rechts. Op mobiel wil je de tekst bovenaan (want die is belangrijker). Stel voor de tekstkolom volgorde 1 in op XS, en voor de afbeeldingskolom volgorde 2.

Blokken verbergen per apparaat

Wil je dat een blok niet zichtbaar is op bepaalde apparaten? Dat stel je zo in:

Klik op het blok → tabblad Instellingen → kies bij Verbergen de apparaten waarop het blok niet zichtbaar moet zijn.

Praktijkvoorbeeld: Maak een desktop-versie en een mobiel-versie van hetzelfde blok. Verberg de desktop-versie op telefoon (XS/SM) en de mobiel-versie op desktop (MD/LG/XL). Zo krijgt elke bezoeker de best passende versie.

Thema: viewports

Via Thema → Viewports kun je globale stijlen instellen per schermgrootte. Dit zijn de vier viewport-secties:

Per viewport kun je onder andere instellen: marges, breedte, hoogte, achtergrondkleur, randen, schaduwen, ondoorzichtigheid en transformaties (schaal, rotatie, verplaatsing).

Let op: De vier viewports staan vast — je kunt geen extra viewport toevoegen of bestaande verwijderen.

Wanneer gebruik je dit

• Je wilt je website optimaliseren voor mobiel, tablet en desktop
• Je wilt kolommen anders indelen per schermgrootte
• Je wilt bepaalde blokken of elementen verbergen op specifieke apparaten