Responsive Breakpoints Mobiel Tablet desktop aantal pixels

Logo cursus traing wordpress

Responsive Breakpoints Mobiel Tablet desktop aantal pixels

Breekpunten bepalen en aanpassen WordPress thema

In deze handleiding behandel ik de breekpunten of breakpoints van een . Ik ga uit van het omdat dit anno 2024 éé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 .

  • 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 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 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 plaatsen.

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


Wil je meer details over Responsive Breakpoints Mobiel Tablet desktop aantal pixelsof info?

Wil je meer weten? Veel bezoekers met interesse in Responsive Breakpoints Mobiel Tablet desktop aantal pixels bekeken ook de onderstaande handleidingen:


Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je website beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je WordPress website of webshop mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Info over Responsive Breakpoints Mobiel Tablet desktop aantal pixels

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Responsive Breakpoints Mobiel Tablet desktop aantal pixels en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven