Probleem:
Mijn website gebruikt het Phlox thema. Onlangs viel het mij op dat wanneer je in Chrome een blog bezocht er een horizontal scrollbar werd getoond. Een vertical scrollbar is handig maar een horizontal scrollbar is over het algemeen overbodig.
Ik had het idee dat het probleem zich toen alleen voordeed op mijn 15 inch laptop scherm. Vandaag viel het mij op dat het probleem zich ook voordeed op een 24 inch scherm. Toen begon het mij toch wel te irriteren omdat het er niet mooi uitziet.
Oplossing:
Het probleem komt alleen voor bij een blog bericht zoals het bericht wat je nou aan het lezen bent. Het wordt veroorzaakt doordat deze pagina een linker en rechter sidebar heeft. Vooral bij de rechter sidebar wordt door de Phlox auteurs met negatieve marges gewerkt. Firefox vindt dit blijkbaar geen probleem maar Chrome wel.
Na onderzoeken en testen heb ik onderstaande stukje CSS code toegevoegd aan mijn child theme. Hierna was het probleem opgelost. Vergeet niet de cache te wissen als je bijvoorbeeld WP-Rocket gebruikt.
/* Hide horizontal scrollbar in the post template*/
.single #inner-body {
overflow: hidden;
}
Lees meer blogs op mijn website over het Phlox thema.
Oplossing getest op:
WordPress 5.3.2, Phlox 2.5.0