/* ============================================================ CHA CHI VERSACI — mobiel Drie dingen, en ze horen bij elkaar omdat ze allemaal over de breedte van het scherm gaan. WAT ER MIS WAS Gemeten op een viewport van 495px: de kolommen van Elementor stapelden niet. Een sectie met drie kolommen zag er zo uit: kolom 375px (3 x 375 = 1125px) .elementor-container 485px overflow-x: auto section 495px De container is dus smaller dan zijn inhoud en scrolt horizontaal, maar zonder dat je dat ziet. Gevolg: tekst, knoppen en kaarten werden rechts afgekapt. Ook secties met twee kolommen deden dat. De kolommen kunnen niet krimpen onder hun min-content breedte, en de container heeft flex-wrap:nowrap. Daarom hieronder allebei: laten teruglopen, en de kolommen op volle breedte. WAT HET NU DOET 1. De 10px die Elementor op elke kolom zet gaat er links en rechts af. Die is bedoeld voor kolommen die naast elkaar staan; op mobiel staan ze onder elkaar en houdt hij de inhoud alleen maar van de rand af. De marge van de sectie en de container blijft: die bepaalt de leesbreedte van de tekst. 2. Een sectie met drie kolommen of meer wordt een veegbare rij, met inklikken (scroll-snap) zodat je op een kaart uitkomt en niet er half tussenin. Twee kolommen stapelen gewoon. 3. Het menuknopje is een echte knop geworden in plaats van een grijs vierkantje. Breekpunt 767px is dat van Elementor zelf; het menu klapt al op tablet dicht en heeft daarom zijn eigen, ruimere grens. ============================================================ */ /* ============================================================ 1 · DE KOLOMMARGE VAN ELEMENTOR ============================================================ */ @media (max-width:767px){ /* De ACHTERGRONDEN tot de rand, de TEKST niet. Dat is het verschil tussen een website en een ingekaderd document. Een sectie is de laag die de kleur draagt; die mag over de volle breedte. De container erin draagt de inhoud; die houdt marge, want tekst die tegen de schermrand plakt leest niet. Dus: de sectie zelf krijgt geen marge meer en zijn boxed-breedte gaat eraf, maar de container houdt 18px aan weerszijden. Wat je dan ziet is een doorlopende kleurbaan met leesbare tekst erin. De 10px die Elementor op elke kolom zet gaat wel weg: die komt bovenop de 18px hieronder en is op mobiel enkel dubbelop. De header blijft erbuiten - die heeft zijn eigen indeling. */ /* 1. de kleurlaag: van rand tot rand */ .elementor:not(.elementor-location-header) .elementor-section{ padding-left:0 !important;padding-right:0 !important; margin-left:0 !important;margin-right:0 !important; } .elementor:not(.elementor-location-header) .elementor-section.elementor-section-boxed > .elementor-container{ max-width:100%; } /* 2. de inhoudslaag: houdt lucht */ .elementor:not(.elementor-location-header) .elementor-section > .elementor-container{ padding-left:18px;padding-right:18px; margin-left:0;margin-right:0; } /* ...behalve als de eigen blokken erin zitten. Die dragen hun eigen achtergrond en regelen hun marge zelf met een .wrap erbinnen. Zet je er hier ook nog 18px omheen, dan schuift die achtergrond mee naar binnen en houd je precies de witte rand over die weg moest. Gemeten op de voorpagina, waar de hele pagina één HTML-blok is: .elementor-container links 0 breed 495 pad 18px/18px .ccv-home.ccv-hero links 18 breed 459 <- de stippen begonnen hier :has(.wrap) is het signaal: dit blok doet zijn marge zelf. */ .elementor:not(.elementor-location-header) .elementor-section > .elementor-container:has(.wrap){ padding-left:0;padding-right:0; } .elementor:not(.elementor-location-header) .elementor-column > .elementor-element-populated{ padding-left:0 !important;padding-right:0 !important; } /* En hetzelfde voor de eigen blokken: 26px is op een telefoon te veel, maar nul is te weinig. */ .ccv-hero .wrap, .ccv-home .wrap, .ccv-contact .wrap, .ccv-boek .wrap, .ccv-boek-slot .wrap, .ccv-boeken .wrap, .ccv-indeling .wrap, .ccv-omgeving .wrap, .ccv-praktischspanje .wrap, .ccv-cijfers .wrap, .ccv-choco .wrap, .ccv-tour .wrap, .ccv-show .wrap, .ccv-praktisch .wrap, .ccv-footer-socials .wrap, .ccv-footer-nieuwsbrief .wrap{ padding-left:18px;padding-right:18px;max-width:100%; } /* Een lange URL of een woord zonder streepjes duwde de kaart breder dan het scherm. */ .ccv-hero, .ccv-contact, .elementor-widget-container{ overflow-wrap:anywhere; } } /* ============================================================ 2 · KOLOMMEN: STAPELEN, OF SLIDEN VANAF DRIE ============================================================ */ @media (max-width:767px){ /* Eerst het algemene geval: laten teruglopen en op volle breedte. Zonder flex-wrap blijft de rij naast elkaar staan en helpt een breedte van 100% niets. !important op de breedte, en dat is hier geen luiheid. Elementor zet de kolombreedte per element bij (.elementor-2198 .elementor-element.elementor-element-abc{width:33%}) en wint dat met gemak. Gemeten: mijn regel raakte de kolom wel - de scroll-snap eruit kwam door - maar flex-basis bleef 'auto' en de breedte 78px. Alleen de maatvoering krijgt dus voorrang; de rest van dit bestand heeft het niet nodig. */ /* Niet in de header. Die is ook van Elementor en heeft ook kolommen - logo, menu, knop - maar die horen juist naast elkaar te blijven. Zonder deze uitzondering stapelde de header en stond er op mobiel alleen nog een logo; het menuknopje en "Steun ons" waren weg. */ .elementor:not(.elementor-location-header) .elementor-container{ flex-wrap:wrap; overflow-x:visible; } .elementor:not(.elementor-location-header) .elementor-container > .elementor-column{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; } /* En dan de uitzondering: drie kolommen of meer worden een rij om doorheen te vegen. Naast elkaar houden leest beter dan een stapel van zes kaarten waar je langs moet scrollen. :has() kijkt of er een derde kolom is. Kent een browser dat niet, dan valt deze regel weg en stapelen ze gewoon - dat is een nette terugval, geen kapotte pagina. */ .elementor:not(.elementor-location-header) .elementor-container:has(> .elementor-column:nth-child(3)){ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:0; gap:12px; padding-bottom:6px; /* Geen marge en geen negatieve marge. Die stonden er eerst om de rij te laten uitlopen buiten een pagina met 16px marge; nu de pagina zelf tot de rand loopt zouden ze de rij juist 16px buiten beeld trekken. */ padding-left:0;padding-right:0; margin-left:0;margin-right:0; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .elementor:not(.elementor-location-header) .elementor-container:has(> .elementor-column:nth-child(3))::-webkit-scrollbar{ display:none; } .elementor:not(.elementor-location-header) .elementor-container:has(> .elementor-column:nth-child(3)) > .elementor-column{ /* Iets minder dan vol scherm, zodat de volgende kaart net zichtbaar is. Dat is de aanwijzing dat er meer staat. */ flex:0 0 84% !important; width:84% !important; max-width:84% !important; scroll-snap-align:center; } } /* ---------- de eigen rasters, zelfde behandeling ---------- */ @media (max-width:767px){ .ccv-footer-socials .soc-grid, .ccv-cijfers-grid, .ccv-praktisch-grid, .ccv-hero .stats{ display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-left:0;padding-right:0; margin-left:0;margin-right:0; scroll-padding-left:0; -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:none; } .ccv-footer-socials .soc-grid::-webkit-scrollbar, .ccv-cijfers-grid::-webkit-scrollbar, .ccv-praktisch-grid::-webkit-scrollbar, .ccv-hero .stats::-webkit-scrollbar{display:none} .ccv-footer-socials .soc-grid > *, .ccv-cijfers-grid > *, .ccv-praktisch-grid > *{ flex:0 0 68%;scroll-snap-align:center; } /* De drie kerngetallen zijn kort; daar passen er twee naast elkaar en hoef je maar één keer te vegen. */ .ccv-hero .stats > *{ flex:0 0 44%;scroll-snap-align:center; } /* De socialkaarten zijn smal - vier op een scherm is prima. */ .ccv-footer-socials .soc-grid > *{flex:0 0 40%} } /* ============================================================ 3 · HET MENU ============================================================ */ /* ---------- de indeling van de header op mobiel ---------- De header is uitgezonderd van het stapelen hierboven, want logo, menu en knop horen naast elkaar. Maar zonder verdere maatregel houden die kolommen hun desktopbreedtes (56% / 22% / 22%), en dan schuift het menu links het scherm uit. Dus hier een eigen indeling: menu links, logo in het midden, de steunknop rechts. Het logo krijgt de ruimte die overblijft, en dat is precies de bedoeling - dat is het merk. De volgorde komt van `order`, niet van de DOM: zo hoeft het headersjabloon niet verbouwd te worden en blijft desktop zoals hij is. */ @media (max-width:1024px){ /* De boxed breedte moet hier ook weg, anders staan de drie in een smalle kolom in het midden gepropt met wit ernaast - dat was precies de klacht. Nu de volle breedte, met alleen 14px lucht aan de randen. */ .elementor-location-header .elementor-section.elementor-section-boxed > .elementor-container{ max-width:100% !important; } /* Een raster van 1fr auto 1fr, geen flexrij. Met flex hangt het midden af van hoe breed de twee buitenste items zijn: is het menuknopje een pixel breder dan het hartje, dan staat het logo scheef. Met 1fr auto 1fr is de middelste kolom altijd precies gecentreerd, wat er links en rechts ook staat. */ .elementor-location-header .elementor-section > .elementor-container{ display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding-left:14px;padding-right:14px; width:100%; } .elementor-location-header .elementor-column{ width:auto !important; max-width:none !important; } /* Het menu: eerst, en niet breder dan het knopje zelf. Op desktop is deze kolom 56% breed; daar komt de overloop vandaan. */ .elementor-location-header .elementor-column:has(.elementor-widget-nav-menu){ order:1;justify-self:start; } /* Het logo: in het midden, en het krijgt wat overblijft. Let op de selector: het logo is een html-widget, geen image- of site-logo-widget. Daarom greep :has(.elementor-widget-image) niet en bleef de volgorde staan zoals hij was. In het sjabloon (1204) is de opbouw: kolom 20% met html (logo), kolom 56% met nav-menu, kolom 19% met de knop. */ .elementor-location-header .elementor-column:has(.elementor-widget-html){ order:2;justify-self:center; text-align:center; } /* Het logo mag groot nu de knop alleen nog een hartje is: dat scheelt de breedte die "Steun ons" kostte. De breedte is de rem niet - het logo is 420x280, dus op 76px hoog is het 114px breed, en tussen twee knoppen van 46px in een scherm van 360px blijft er ruim 200px over. De hoogte van de balk bepaalt het, en die groeit gewoon mee. */ .elementor-location-header .elementor-widget-html img{ max-height:76px;width:auto;margin:0 auto;display:block; } /* De balk mag daarvoor iets ruimer; anders plakt het logo tegen de rand van de header. */ .elementor-location-header .elementor-section > .elementor-container{ padding-top:8px;padding-bottom:8px; } /* De steunknop: rechts, en alleen het hartje - de tekst kost de breedte die het logo beter kan gebruiken. */ .elementor-location-header .elementor-column:has(.elementor-widget-button){ order:3;justify-self:end; } .elementor-location-header .elementor-widget-button .elementor-button{ padding:0 !important; width:46px;height:46px; border-radius:50% !important; display:inline-flex;align-items:center;justify-content:center; } .elementor-location-header .elementor-widget-button .elementor-button-text{ display:none; } .elementor-location-header .elementor-widget-button .elementor-button-icon{ margin:0 !important;font-size:18px; } } /* Elementor klapt het menu al op tablet dicht (nav-menu--dropdown- tablet), dus deze grens ligt hoger dan de 767px hierboven. */ @media (max-width:1024px){ /* Het knopje was een grijs vierkantje met een streepjes-icoon: op een lichte header nauwelijks te zien, en te klein om goed te raken. Nu een knop in de kleur van de site, 46px hoog - de maat waarop een duim betrouwbaar mikt. */ .elementor-menu-toggle{ width:auto;min-width:46px;height:46px; padding:0 14px; border-radius:var(--r-pill); background:var(--accent) !important; color:var(--on-accent) !important; box-shadow:0 4px 0 var(--accent-deep); border:0; display:inline-flex;align-items:center;justify-content:center; transition:transform .2s cubic-bezier(.2,.9,.3,1.4),box-shadow .2s ease; } .elementor-menu-toggle:hover, .elementor-menu-toggle:focus{ background:var(--accent-bright) !important; color:var(--on-accent) !important; } .elementor-menu-toggle:active{ transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep); } .elementor-menu-toggle:focus-visible{ outline:3px solid var(--pop);outline-offset:3px; } .elementor-menu-toggle i, .elementor-menu-toggle svg{ font-size:22px;width:22px;height:22px;color:inherit;fill:currentColor; } /* Het woord "Menu" erbij: een pictogram alleen wordt gemist, en hier is ruimte genoeg. */ .elementor-menu-toggle .elementor-screen-only{ position:static !important; width:auto !important;height:auto !important; clip:auto !important;clip-path:none !important; overflow:visible !important; margin-left:8px; font-family:'Fredoka',sans-serif;font-size:14px;font-weight:600; letter-spacing:.02em; } /* Het uitklapmenu zelf. Stond als een smalle strook met kleine regels; nu volle breedte met regels waar je op kunt mikken. */ .elementor-nav-menu--dropdown{ background:var(--card) !important; border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:var(--shadow); border-top:3px solid var(--accent); max-height:80vh;overflow-y:auto; } .elementor-nav-menu--dropdown a{ font-family:'Fredoka',sans-serif !important; font-size:17px !important;font-weight:500 !important; color:var(--ink) !important; padding:15px 20px !important; border-bottom:1px solid var(--border); } .elementor-nav-menu--dropdown a:hover, .elementor-nav-menu--dropdown a.elementor-item-active{ background:var(--pill) !important; color:var(--accent-deep) !important; } /* Een submenu hoort zichtbaar onder zijn hoofditem te horen. */ .elementor-nav-menu--dropdown .sub-menu a{ font-size:15px !important; padding-left:38px !important; color:var(--text) !important; } .elementor-nav-menu--dropdown .sub-menu{ background:var(--bg-alt) !important; } /* Het pijltje bij een item met submenu groot genoeg om te raken. */ .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown-tablet .sub-arrow, .elementor-nav-menu--dropdown .sub-arrow{ padding:10px !important; } }