Samenvatting
Als elementen springen, de uitlijning niet klopt, kolommen onverwacht onder elkaar vallen of content buiten het scherm steekt, is de oorzaak zelden het element zelf — meestal ligt die in de drager: de container, rij of kolom eromheen. Dit artikel laat je structuurproblemen oplossen bij de bron, zodat je niet eindeloos op elementniveau blijft patchen. Wil je eerst weten hóe het grid (rijen, kolommen, spanwijdtes) werkt? Zie Responsive design en breakpoints; dit artikel is de troubleshooting-kant daarvan.
Wanneer gebruik je dit?
- Kolommen springen onverwacht onder elkaar (ook op desktop).
- Een element steekt rechts buiten het scherm op mobiel (horizontale scrollbalk).
- Twee kolommen die naast elkaar horen, stapelen of staan scheef.
- Je hebt al van alles op elementniveau geprobeerd, maar het "wandelt" steeds mee.
Hoe werkt dit in Mach3Blocks?
De structuur is opgebouwd als blok → container → rij → kolom → element. Elke laag heeft een rol:
- Container — bepaalt de hoofdbegrenzing en de breedte waarbinnen alles valt.
- Rij — verdeelt de ruimte horizontaal en bepaalt de volgorde van de kolommen.
- Kolom — heeft een spanwijdte (een breedte op een 12-koloms raster) en bepaalt het stapelgedrag op kleinere schermen.
Twee inzichten verklaren de meeste problemen:
- De som van de kolom-spans in een rij hoort binnen de 12 te blijven. Komt de totale breedte daarboven, dan "past" een kolom er niet meer bij en springt die naar de volgende regel — ook op desktop. (De spanwijdtes per apparaat staan in Responsive design en breakpoints.)
- Een vaste (pixel)breedte breekt op smalle schermen. Een element of kolom met een harde breedte die groter is dan het scherm, veroorzaakt horizontale overflow (die vervelende zijwaartse scrollbalk). Werk daarom met responsieve breedtes; op mobiel wordt een kolom doorgaans 100% breed.
--alert variant:warning title:"Zoek eerst de drager"--
Los een structuurprobleem op bij de bovenliggende laag (container → rij → kolom) vóór je aan het element sleutelt. Een element dat "springt" is meestal het gevólg van een rij- of kolominstelling — corrigeer je alleen het element, dan komt het probleem op een ander schermformaat terug.
--/alert--
Welke rechten heb je nodig?
Je past opmaak/structuur aan, dus je hebt het recht Websites/presentaties stijlen nodig. Zie je de opmaak-opties niet of kun je niet opslaan, dan ontbreekt dat recht.
Waar klik je precies?
Werk van buiten naar binnen:
- Open de pagina in de editor en zet de weergave op Desktop.
- Selecteer eerst de container, dan de rij, dan de kolom rond het probleem — en let per niveau op breedte, spanwijdte, uitlijning en ruimte.
- Corrigeer de structuur op het niveau waar de afwijking ontstaat, vóór je het element zelf aanraakt.
- Controleer of een kolom een vaste breedte heeft die beter responsief kan.
- Herhaal de controle op Tablet en Telefoon staand.
Supportflow: symptoom → oorzaak → oplossing
"Kolommen springen onder elkaar op desktop"
De som van de kolom-spans in de rij is groter dan 12 (of er staan vaste breedtes die niet passen).
- Selecteer de rij en tel de spanwijdtes van de kolommen op.
- Herverdeel de breedtes zodat het totaal binnen de 12 blijft, en verwijder onnodige vaste breedtes.
- Resultaat: een stabiele kolomverdeling op desktop.
"Een element steekt rechts buiten het scherm op mobiel"
Een kolom of element heeft een niet-responsieve (vaste) breedte, of er staat overflow aan.
- Zet de mobiele breedte van de kolom op 100%.
- Zoek het onderdeel met de vaste breedte en maak die responsief; controleer de Overloop-instelling van de container.
- Resultaat: geen horizontale scrollbalk meer.
Praktijkvoorbeelden
Voorbeeld 1 — Prijstabel breekt op tablet
Situatie: vier prijskolommen naast elkaar persen op tablet samen, de tekst overlapt.
Ingreep: op tablet de rij naar 2×2 kolommen herverdeeld (elke kolom span 6) en de tussenruimte bijgesteld.
Resultaat: leesbare prijsblokken zonder overlap, op elk formaat.
Voorbeeld 2 — Contactsectie met scheve kolommen
Situatie: de formulierkolom zakt onder de tekstkolom, terwijl er genoeg ruimte lijkt.
Ingreep: de containerbreedte en de spanverdeling van de rij gecorrigeerd en overtollige kolommarges opgeschoond.
Resultaat: beide kolommen staan weer netjes naast elkaar op desktop en stapelen logisch op mobiel.
Veelgemaakte fouten
- Meteen op het element sleutelen zonder de structuur te inspecteren. Loop eerst container → rij → kolom na.
- Vaste pixelbreedtes forceren (zeker op mobiel). Werk met responsieve kolombreedtes; laat een kolom op mobiel 100% worden.
- Vergeten per schermformaat te controleren. Een fix op desktop kan op tablet/mobiel juist iets breken.
- Aannemen dat custom code niets doet. Custom code in een blok kan de gridstructuur overschrijven — check dat als niets anders klopt.