Om op een website alles mooi ‘compact‘ te houden op grote (brede) schermen, maakt men gebruik van zogenaamde ‘containers‘. Of anders gezegd, men gaat meestal de content ‘wrappen‘ in een ‘alles omvattend’ parent element, welk men vervolgens een maximale breedte meegeeft (bv. 1200 pixels). Dit parent element geef men tenslotte een ‘margin-right’ en ‘margin-left’ ‘auto’, en klaar is kees. De content staat nu mooi gecentreerd en is niet volledig uitgerekt over de breedte van het scherm (zoals deze pagina waar je nu naar kijkt).
Probleem
Maar wat als je op een bepaalde moment in je ontwerp toch een sectie wil toevoegen die wel over de hele breedte van je scherm moet lopen? Bijvoorbeeld om een achtergrondkleur mee te geven die full-width moet zijn? Hoe los je dat dan op?
Oplossing
De oplossing is dit stukje code, dat je toepast op het element welk je full-width wilt maken:
section#full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
WAAR DEZE CODE SNIPPET PLAATSEN?
Je kunt PHP snippets toevoegen onderaan je ‘functions.php’ file van je ‘child theme’ (voor de ‘>?’ als deze er staat). CSS code daarentegen, plaats je in je ‘style.css’ file van je ‘child theme’. Bezint eer ge begint wanneer je deze files aanpast, want deze kunnen je website ‘breken’.
