Wat het is
CSS (de opmaakcode die bepaalt hoe een pagina eruitziet) kan elementen op maat maken met vaste eenheden, zoals pixels (een vak ingesteld op precies 800 pixels breed, bijvoorbeeld), of relatieve, flexibele eenheden zoals percentages, die zich automatisch aanpassen aan welk scherm de pagina ook wordt bekeken. Een "element met vaste breedte" is elk onderdeel van een pagina — een afbeelding, een tabel, een containervak — dat is ingesteld met een van die vaste pixelwaarden in plaats van een flexibele.
Dit werkt prima zolang het scherm breder is dan die vaste waarde, maar zodra het daadwerkelijke scherm (vooral een telefoon) smaller is dan de vaste breedte van het element, heeft de browser geen andere keuze dan de pagina zijwaarts te laten scrollen om het te accommoderen, omdat hij een element niet kleiner kan maken dan zijn expliciet ingestelde grootte.
Waarom het belangrijk is
Horizontaal scrollen is een van de meest opvallende, onmiskenbare tekenen van een kapotte mobiele lay-out, omdat het een bezoeker dwingt in twee richtingen tegelijk te scrollen alleen om normaal te lezen — een compleet ander, frustrerender navigatiepatroon dan het op-en-neer scrollen dat elke mobiele bezoeker overal verwacht. Meestal is er maar één te groot element ergens op de pagina nodig (een brede afbeelding, een ingesloten tabel, een vak met vaste breedte) om dit gedrag over de hele pagina af te dwingen, niet alleen rond dat ene element.
Dit is vaak een overblijfsel van content die eerst voor desktopgebruik is ontworpen — een tabel gekopieerd uit een spreadsheet, of een afbeelding ingevoegd op zijn originele, ongecomprimeerde pixelafmetingen — in plaats van een fundamentele fout in het algehele siteontwerp.
Hoe je het oplost
- Open je site op een telefoon (of een smal browservenster) en controleer of de hele pagina zijwaarts scrolt, of zoek de specifieke sectie waar het begint.
- Zoek naar het specifieke element dat de overflow veroorzaakt — vaak een brede afbeelding, een ingesloten tabel, of een vak met een expliciet ingestelde pixelbreedte in de opmaak.
- Vervang vaste pixelbreedtes door relatieve eenheden zoals percentages, of voeg een
max-width: 100%-regel toe zodat het element nooit de daadwerkelijke breedte van het scherm kan overschrijden. - Overweeg voor brede tabellen specifiek om ze in te pakken in een scrollbare container die beperkt is tot die ene tabel, in plaats van de hele pagina zijwaarts te laten scrollen.
- Controleer na elke wijziging opnieuw op een telefoon om te bevestigen dat het horizontaal scrollen weg is.