Breekpunten bepalen en aanpassen WordPress thema

In deze handleiding behandel ik de responsive breekpunten of breakpoints van een WordPress thema. Ik ga uit van het Astra thema omdat dit anno 2025 één van de beste WordPress thema’s is.

Standaard breakpunten (breekpunten) Astra WordPress thema

Voorheen had het Astra WordPress thema standaard onderbrekingspunten op 544 pixels voor mobiele apparaten en 768 pixels voor tablet-apparaten. In Astra v2.4, is er de mogelijkheid om de Responsive breakpoints in Astra in te stellen en deze aan te passen aan uw page builder.

• Mobiele breakpoints – Bestaand en Nieuw – 544px beide zijn hetzelfde.
• Tablet breakpoints – 768 ( Bestaand ) – 921 ( Nieuw breakpoint )

Waarom aantal pixels aanpassen voor mobiel

Sommige ontwerpen en gebruikers hebben behoefte aan verschillende breakpoints. Stel je bouwt je website met een page builder en de page builder heeft verschillende breekpunten ( in plaats van 544 & 768 ).

Wanneer een menu wordt gemaakt met een breekpunt op 921px, waaronder ons menu verandert in een Hamburger Menu, dus normaal gesproken zouden de kleuren voor dit apparaat als Tablet moeten renderen, maar in dit geval erven de kleuren van de desktop. Omdat we voor deze versie een standaard breekpunt hadden van 768px voor tablet. Dit scenario is in deze versie opgelost.

Dus vanaf de Astra v2.4.0 update kun je de breekpunten van het Astra-thema voor Tablet & Mobile wijzigen ten opzichte van de breekpunten van de paginabouwer.

Hoe aantal pixels aanpassen voor mobiel

In Astra v2.4 zijn nieuwe breekpunten geïntroduceerd voor nieuwe gebruikers deze zijn, voor Tablet = 921px, voor Mobiel = 544px.
Wat het betekent voor de bestaande gebruikers, de site of eventuele wijzigingen zullen niet worden beïnvloed, hun breakpoints zullen 768px & 544px zijn zoals het werkte.
Als de bestaande gebruikers hun standaard breekpunten willen updaten met andere breekpunten, kunnen ze het volgende filter gebruiken –
Er zijn twee nieuwe filters geïntroduceerd om de breekpuntnummers voor mobiel en tablet te wijzigen.

// Update your custom mobile breakpoint below - like return 544;
add_filter( 'astra_mobile_breakpoint', function() {
    return 544;
});

To change the Tablet Breakpoint:

// Update your custom tablet breakpoint below - like return 921;
add_filter( 'astra_tablet_breakpoint', function() {
    return 921;
});

Breakpunten aanpassen van content in CSS

Het is handig de breakpunten aan te passen van de content in CSS

Breakpunten aanpassen CSS | Mobiel tablet desktop

De breakpunten aanpassen voor afzonderlijk mobiel, tablets en laptop/desktop computers. Plaats dit in de CSS van je WordPress thema:

/* Klein mobiel ------------------------ */
@media only screen
and (max-width : 544px) {
/* jouw CSS stijlen */
h1 { font-size: 30px; }
}

/* Medium - tablet --------------------- */
@media only screen
and (min-device-width : 545px)
and (max-device-width : 920px) {
/* jouw CSS stijlen */
h1 { font-size: 40px; }
}

/* Groot - laptop desktop -------------- */
@media only screen
and (min-device-width : 921px)
and (max-device-width : 5000px) {
/* jouw CSS stijlen */
h1 { font-size: 50px; }
}

Breakpunten aanpassen CSS grote en kleine schermen

De breakpunten aan te passen in CSS kun je ook beperken tot of kleine of grote schermen. Plaats dit dan in de CSS van je WordPress thema:

/* Mobiel en tablet -------------------- */
@media only screen
and (max-width : 920px) {
/* jouw CSS stijlen */
h1 { font-size: 30px; }
}

/* Groot - laptop desktop -------------- */
@media only screen
and (min-device-width : 921px)
and (max-device-width : 5000px) {
/* jouw CSS stijlen */
h1 { font-size: 50px; }
}

Voorbeeld breekpunt CSS aanpassen: element verwijderen

Een voorbeeld. Op desktop wil je wellicht de dropdownpijltjes uitzetten in je Astra thema. Je kan dit dan in je Custom CSS plaatsen.

/* Groot - laptop desktop -------------- */
@media only screen
and (min-device-width : 921px)
and (max-device-width : 5000px) {
.ast-icon.icon-arrow svg {
display:none;
}
}