/* The Culture Trail, uitlijning homepage
Beheerd bestand, met de hand geschreven, geen Webflow-uitvoer.
Gelinkt vanuit index.html (root en /nl/) na theculturetrail.webflow.css.
Bronnen per blok staan bij het blok zelf. Elk blok noemt wie het opdroeg,
in welk bericht, en wat de aanleiding was. Een aantekening die alleen
"besluit" zegt is niet na te lopen; dat is precies de fout die de oude
home-v2-instructie ons vijf dagen heeft gekost.
1. Alle secties dezelfde 80vw.
Bron: correctie Dauji 13-08-2026, binnengekomen via het account van
Romeo, doorgezet als opdracht van de commandopost aan het TCT-bouwspoor,
punt 4 van de vijf herstelpunten. Letterlijk: "De uitlijning klopt niet,
je moet alle secties dezelfde 80vw geven."
De naam op het account is niet de persoon die de opdracht gaf: Dauji's
eigen account liep op 12-08-2026 19:06 op de maandlimiet, en hij werkt
sindsdien via Romeo's account. Wie dit over een halfjaar leest kent die
accountsituatie niet meer, vandaar dat het hier voluit staat.
Gemeten op het origineel (home-v2.html) voor deze regel:
1440 -> 1152 px = 80.00vw (goed)
1024 -> 819.19 px = 80.00vw (goed)
768 -> 614.39 px = 80.00vw (goed)
375 -> 315 px = 84.00vw (afwijkend)
De afwijking op 375 komt uit theculturetrail.webflow.css, regelblok
@media screen and (max-width: 479px): daar wordt .main-container
width:auto met margin-left/right 8vw, wat 84vw oplevert in plaats van 80vw.
Deze ene regel trekt dat gelijk. Verder niets. */
@media screen and (max-width: 479px) {
.main-container,
.main-container.small {
width: 80vw;
max-width: 80vw;
margin-left: auto;
margin-right: auto;
}
}
/* 2. Lege CMS-lijst in de footer verbergen.
Bron: opdracht commandopost 13-08-2026, vervolgpunt 2, gegeven in het
bericht direct na de goedkeuring van de v2-restauratie. Aanleiding: ik
had het blok bij die restauratie als gat gemeld en met rust gelaten
omdat de footer bevroren is; de commandopost besliste toen dat de
bevriezing het ontwerp beschermt en niet een foutmelding die over de
tekst valt. Letterlijk uit die opdracht: "verbergen en niet verwijderen,
zodat het terugkomt zodra er items in de collectie staan."
Het blokje "No items found." is geen ontwerp maar de Webflow-boodschap
aan de redacteur bij een lege collectie.
Gemeten voor deze regel: zichtbaar blok van 153.92 x 44 px op 1440
(rechtsonder, position:fixed) en 375 x 40 px op 375, waar het over de
bodytekst valt.
Alleen de lege staat wordt verborgen, niet de lijst zelf: zodra er items
in de collectie staan rendert .w-dyn-items gewoon en komt het terug. */
.news-home-hero.floating .w-dyn-empty {
display: none;
}
/* 3. De gele bollen staan onder de eerste regel in plaats van erop.
Bron: feedbackpunt B6 van Josien in FEEDBACKDOC-JOSIEN-website-v2.md
("Graag dit uitlijnen aanpassen, duidelijker"), doorgezet door de
commandopost 13-08-2026 als vervolgpunt 3, met de motivering dat het
een uitlijningsfout is en geen herontwerp en dus binnen de lane valt.
Oorzaak: .opsomming staat op align-items:center, dus de bol centreert op
het hele alinea-blok in plaats van op de eerste regel. Gemeten afwijking
voor deze regel, bol-midden ten opzichte van het midden van de eerste
regelbox: 1440 +5 tot +15 px, 1024 +5 tot +15 px, 768 +15 tot +25 px,
375 +16 tot +32 px.
De marge is de helft van het verschil tussen regelhoogte en bolgrootte:
20 px regel met 15 px bol geeft 2.5 px, 16 px regel met 15 px bol geeft
0.5 px, 16 px regel met 10 px bol geeft 3 px. De regelhoogte zakt naar
16 px in @media max-width:767px, de bol naar 10 px in max-width:479px,
vandaar drie stappen in plaats van twee. */
.opsomming {
align-items: flex-start;
}
.opsomming > .dot {
margin-top: 2.5px;
}
@media screen and (max-width: 767px) {
.opsomming > .dot {
margin-top: .5px;
}
}
@media screen and (max-width: 479px) {
.opsomming > .dot {
margin-top: 3px;
}
}
/* 4. Handmatige regelafbreking alleen onderdrukken waar zij schaadt.
Bron: opdracht commandopost 13-08-2026, vervolgpunt na de B6-oplevering.
Aanleiding: ik had gemeld dat de
in de eerste bullet op 375 midden
in een zin breekt en voorgesteld hem weg te halen; de commandopost hield
dat tegen omdat de afbreking op brede schermen doet wat de ontwerper
wilde. Letterlijk: "Onderdruk hem alleen waar hij schaadt (...) en laat
de bron ongemoeid." De
blijft dus in de html staan.
Gemeten gat achter de handmatige afbreking, als percentage van de
beschikbare tekstbreedte (0 procent betekent: de regel was toch al vol,
de afbreking valt precies op het natuurlijke breekpunt):
1440 0.0% 992 0.0% 900 0.0% <- doet wat hij moet
834 91.8% 768 78.6% 700 77.7% <- strandt een losse regel
600 49.8% 540 30.9% 480 14.4%
430 11.4% 393 84.0% 375 59.6%
360 57.7% 320 7.8%
De omslag ligt tussen 834 en 900 px: vanaf 900 past de tekst voor de
afbreking precies op een volle regel, daaronder niet meer. De regel
hieronder valt daarom samen met het eerstvolgende webflow-breekpunt
erboven, max-width 991px, zodat er geen los getal in de stylesheet komt
te staan. Tussen 900 en 991 verandert er niets zichtbaars: daar was het
gat al 0 procent en breekt de tekst zonder de
op precies dezelfde
plek. Nagemeten op 992 en 900, regelbreedtes voor en na identiek. */
@media screen and (max-width: 991px) {
.opsomming p br {
display: none;
}
}
/* 5. Footergrid volgt de 80vw-uitlijning niet onder 480px.
Bron: opdracht commandopost 17-08-2026, reparatie 2 punt h, uit het
bugrapport van 14-08-2026. Gemeten voor deze regel op 375px:
footer-halves, divider-footer-halves en footer-columns kwamen uit op
left 37.5 / breedte 315px (84vw), terwijl de rest van de pagina
(main-container) op left 37.5 / breedte 300px (80vw) staat.
Oorzaak: theculturetrail.webflow.css zet in @media max-width:479px apart
.form-block-footer { width: 84vw; ... }, los van de 80vw die
.main-container elders al krijgt (blok 1 hierboven zet die 300px-ouder
al goed). Het grid .footer-halves (grid-template-columns: 1fr op deze
breedte) groeit mee met die 84vw-kolom en duwt zichzelf, de divider en
footer-columns tot buiten de 300px-ouder. Deze ene regel trekt
form-block-footer terug naar 80vw, waarna footer-halves, de divider en
footer-columns vanzelf binnen de 300px-ouder blijven staan. Nagemeten na
de fix: alle vier op left 37.5, breedte 300. */
@media screen and (max-width: 479px) {
.form-block-footer {
width: 80vw;
}
}
/* 6. .section.hero-template en .section.template-details-section scrollen
40px horizontaal vanaf 992px.
Bron: opdracht commandopost 17-08-2026, reparatie 2 punt i, uit het
bugrapport van 14-08-2026 (gemeten op privacy.html, exact 1440: 40px
horizontale scroll). theculturetrail.webflow.css zet op deze twee
klassen margin-left: 40px; margin-right: 40px, terwijl de sectie zelf
width:100% heeft. Vanaf 992px (@media max-width:991px zet de eigen
stylesheet die marge al op 0, hieronder dus geen dubbele regel nodig)
telt de 40px marge daardoor bovenop de volle breedte op en duwt de
pagina 40px voorbij de viewport.
Niet alleen privacy.html gebruikt deze klassen: algemene-voorwaarden.html,
template/changelog.html en template/style-guide.html hebben dezelfde
twee klassen en dus dezelfde fout; dit bestand is op alle vier gelinkt
zodat de fix overal aankomt. Nagemeten: scrollWidth = clientWidth op
1440, 1024, 768, 375 op alle vier pagina's. */
@media screen and (min-width: 992px) {
.section.hero-template,
.section.template-details-section {
margin-left: 0;
margin-right: 0;
}
}
/* 7. Horizontale schuifbalk op alle exportpagina's in de Engelse weergave,
op elke telefoonbreedte.
Bron: vraag Dauji 02-09-2026 "Helemaal mobile optimized?", nagemeten in
Playwright met iPhone 13-emulatie op tien pagina's.
Gemeten voor deze regel (documentbreedte tegen viewport, Engelse
weergave): 320 -> 397, 360 -> 401, 375 -> 402, 390 -> 404 op trails,
ons-verhaal, teams, talent, entrepreneur, privacy en algemene-voorwaarden.
De Nederlandse weergave van dezelfde pagina's was schoon op 390.
Oorzaak: theculturetrail.webflow.css bevat een locale-override die in
Webflow op de Engelse variant is ingesteld en die geen enkele
breekpuntregel heeft:
.text-h1:lang(en) { width: 364px }
Die 364px is breder dan de main-container op een telefoon (312px op 390),
en omdat de kop in een grid staat met een auto-kolom groeit de hele
hero-wrapper mee naar 364px. Vandaar dat de balk alleen in het Engels
verscheen en dat min-width:0 of minmax(0,1fr) niets deed: het is geen
min-contentprobleem maar een harde breedte.
Hieronder alleen onder 768px teruggezet naar auto, zodat de bewuste
regellengte op tablet en desktop blijft staan zoals in Webflow bedoeld.
Nagemeten na deze regel: documentbreedte gelijk aan viewport op 360,
375, 390 en 430 op alle tien pagina's. */
@media screen and (max-width: 767px) {
.text-h1:lang(en) {
width: auto;
max-width: 100%;
}
}
/* 8. Twee knoppen naast elkaar duwen de pagina 12px opzij op 320px.
Bron: zelfde nameting van 02-09-2026 als blok 7.
Gemeten voor deze regel op en/event/entrepreneur.html bij viewport 320:
documentbreedte 332. De rij .div-block-5 in .headline-home-classes staat
op flex-wrap: nowrap, met knop 1 op x=42 breed 103 en knop 2 op x=157
breed 175; samen met de gap van 12px komt dat op 332.
Onder 480px mag die rij afbreken. Op bredere schermen verandert er niets,
want daar past de rij en heeft flex-wrap geen effect.
Nagemeten na deze regel: documentbreedte 320 op 320. */
@media screen and (max-width: 479px) {
.headline-home-classes .div-block-5 {
flex-wrap: wrap;
row-gap: 12px;
}
}
/* 9. De trailspagina schoof op tabletmaat 20px opzij. Oorzaak: Webflow zet
.section.hero-events-section onder 768px op margin-left/right 20px terwijl
de sectie een breedte van 100% houdt, dus 100% + 40px. Gemeten voor:
480 -> 501, 600 -> 621, 767 -> 787, op zowel trails.html als
en/trails.html. Na: documentbreedte gelijk aan het venster op alle
zestien pagina's die ik heb nagelopen. */
@media screen and (max-width: 767px) {
.section.hero-events-section,
.section-copy.hero-events-section { width: auto; max-width: 100%; }
}
/* 10. Aanmeldformulier op telefoon. Drie gemeten problemen, 02-09-2026 op 390px:
(a) elk veld stond op font-size 15px, en Safari op iOS zoomt bij focus in
op alles onder 16px. Je typt je naam en de pagina springt.
(b) de labels stonden op 10px, kleiner dan de placeholder eronder.
(c) het formulier had maar 214px van de 390: de kaart is 312 breed en
daar gaat 16px + 32px binnenmarge aan elke kant vanaf. Met 12 en 20
blijft er 248px over, ruim een zesde meer regel om in te typen.
De voetnieuwsbrief krijgt dezelfde 16px, want die stond ook op 15. */
@media screen and (max-width: 767px) {
.ob-form_form .form_input,
.ob-form_form .fs-select_select,
.ob-form_form select,
.ob-form_form textarea,
.form-footer .form_input,
.form-footer input[type="email"] { font-size: 16px; }
.ob-form_form .form_label { font-size: 12px; }
}
@media screen and (max-width: 479px) {
.ob-form_block { padding-left: 20px; padding-right: 20px; }
.contact-item:has(> .ob-form_block) { padding-left: 12px; padding-right: 12px; }
}