Waarom valt mijn site uit elkaar op een tablet?
Je site valt uit elkaar op een tablet omdat die breedte tussen je ontworpen weergaven in valt. Je ontwierp voor een telefoon en een bureaublad, en daartussen kijkt niemand.
Rond de achthonderd pixels gebeurt het meestal.
Daar staat je driekolomsindeling nog aan terwijl er geen ruimte voor is.
De oorzaak
Een breekpunt dat te laat omslaat. Je kolommen worden dan te smal en je tekst breekt op rare plekken.
Meer daarover lees je bij wat breekpunten zijn.
De tweede oorzaak
Een element met een vaste breedte, zoals een tabel of een ingesloten venster. Dat past niet mee en duwt je pagina open.
Meer daarover lees je bij css.
Hoe je het vindt
Zet je venster op achthonderd pixels breed en kijk. Dat is de breedte waar het bij de meeste sites misgaat.
Meer daarover lees je bij hoe je test of je site responsive is.
Mijn vuistregels
- Test op achthonderd pixels breed.
- Test ook in liggende stand.
- Laat drie kolommen op tablet twee worden.
- Geef tabellen een eigen schuifbalk.
Die laatste lost het probleem op zonder je hele indeling te wijzigen.
De liggende stand
Een tablet die je draait, is opeens duizend pixels breed. Dat is weer een andere weergave die niemand test.
Meer daarover lees je bij frontend.
Wat je aanpast
Meestal alleen je middelste breekpunt. Verplaats hem naar boven en je driekolomsindeling wordt op tijd twee kolommen.
Meer daarover lees je bij mobile first.