Bodytekst is de tekst die de hoofdinhoud vormt van je website. De tekst dat verdeeld is over alinea’s, uitgezonderd van de kopjes, de titel en het navigatiemenu.
Voor de bodytekst op je tablet, ipad of mobiel kun je de lettergrootte (font) beter kleiner maken. Met andere woorden je maakt de bodytekst responsive. Anders staan er vanwege de breedte van je beeldscherm maar een paar woorden per regel en dat leest niet zo prettig.
Wanneer je de gratis versie van elementor gebruikt, kun je dit niet zo makkelijk aanpassen. Indien dit niet lukt, kun je ook één van de onderstaande voorbeelden gebruiken.
Één van deze drie voorbeelden kun je in de CSS van je template plakken. Of plak deze CSS fragment (snippet) in een daarvoor bestemde plugin. Wij hebben deze plugin gebruikt > “snippets“, zie voorbeeld 3.
voorbeelden van css voor responsive weergave
Voor de responsive weergave van de bodytekst, zeg je met onderstaande code het volgende:
Zet de bodytekst in grootte van 12 pixels als het (beeld)scherm van de device (laptop, pc, mobiel, tablet, iPad) een maximaal breedte heeft van 768 pixels.
Dit is gebaseerd op het feit dat de smalste laptop / pc 768 pixels breed is.
Met het overzicht hieronder krijg je een beeld van de pixelbreedte van veel voorkomende devices:
- Beeldscherm laptop of pc > breedte tussen 768 pixels – 5120 pixels
- Tablet / iPad in portrait modus > breedte tussen 600 pixels – 2736 pixels
- Smartphone / Mobiel > breedte tussen 320 pixels – 2960 pixels
Hier vind je een uitgebreid overzicht van maten en pixels per device soort. Je kunt makkelijk sorteren.
VOORBEELD 1
@media ( max-width: 768px ) {
body {
font-size: 12px;
}
}VOORBEELD 2
@media (max-width: 768px) {
p {
font-size: 12px;
}
}voorbeeld 3
Je kunt een code ook plaatsen via een geïnstalleerde plugin, zoals “snippets”.
Mocht het niet het gewenste resultaat geven, verander dan “p” in “body”.
add_action( 'wp_head', function () { ?>
<style>
/* Body font responsive */
@media (max-width: 768px) {
p {
font-size: 12px;
}
}