Responsive Web Design met WordPress

Ik maak voor het bouwen van web-sites veel gebruik van WordPress in combinatie met het Avada thema. Het resultaat is een responsieve website die zowel op een Desktop als een Smartphone mooi meeschaalt.

Om foto’s netjes in een grid op een WordPress site te zetten kun je het beste gebruik maken van tabellen. Ik kwam er echter recent achter dat deze niet mooi meeschalen als je de site op een Smartphone bekijkt. Hetzelfde geldt ook voor YouTube video’s waarvan de thumbnails ook niet mooi meeschalen.

Dit kun je echer eenvoudig oplossen door gebruik te maken van custom CSS code in je WordPress site.

Dit voeg je in je WordPress dashboard toe bij: Weergave > Customizer > Extra CSS

Zet hierin de volgende code:

/* Make images inside tables fully responsive */
td img, th img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent tables from breaking mobile screen bounds */
table {
    max-width: 100%;
    width: 100%;
    table-layout: fixed;
}

/* Optional: allow horizontal scrolling if the table has too many columns */
.table-container {
    width: 100%;
    overflow-x: auto;
}

/* Prevent thumbnails of YouTube videos too large on mobile screen */
.embed-container, 
.wp-block-embed__wrapper, 
iframe {
    max-width: 100%;
    height: auto;
}

Nu worden tabellen en thumbnails van YouTube voortaan wel goed meegeschaald op je Smartphone. Zie als voorbeeld hieronder hoe dit eruit ziet op site die ik heb gemaakt voor de Rijsbergse Vliegerdagen.