The other day they asked in the WordPress forums how they could change in the Astra theme the fact that when viewing a website on a tablet the sidebar was automatically placed under the content, something that the user did not care about in mobile viewing but did not like in tablets, because visitors would lose their banners, resources, etc.
In other words, on desktop screens you could see the sidebar on your site.
But when viewing your website on tablets and mobiles the sidebar would move underneath the content, like this:
Breakpoints
Well, this is because of the so-called breakpoints.
The Astra theme has default breakpoints for tablets and mobiles:
- Mobile breakpoint: 544 pixels
- Breakpoint tablets: 921 pixels
What does this mean?
Well, when the device with which you are viewing our website has a width less than the pixels specified in the breakpoint will change the display, both the sidebars and menus, which will become known as the burger menu.
It is what is usually called as responsive, the quality of the subjects to adapt their content to different sizes of device, something that is not done with the magic of NoCode, but precisely with code.
Historically the most common breakpoints used to be these:
320px – 480px: Mobile.
481px – 768px: iPads, tablets.
769px – 1024px: Laptops with small screens.
1025px – 1200px: Desktop, big screens.
1201px and more – TV, very big screens.
But this is becoming obsolete, because nowadays both cell phones and tablets, desktop computers and not to mention televisions, have larger screens, so designers apply the breakpoints in larger numbers.
Just see above the default breakpoints of Astra, a standard more appropriate to the current sizes of these devices.
How to change the tablet breakpoint in Astra
Having said that, let’s get to the point. How do I change this happy, forgiving, famous breaking point? Well, with a little bit of code, that as always we must add at the end of the functions.php file of our Astra’s child theme.
In case we want to change the breakpoint for tablets the code would be like this:
// Change breakpoint tablets
add_filter( 'astra_tablet_breakpoint', function() {
return 768;
});Code language: JavaScript (javascript)In this example we have changed the breakpoint to 768 pixels, so the sidebar will only be placed under the content when the tablet has less than those pixels.
How to change the mobile breakpoint on Astra
If you want to change the breakpoint for mobile devices the code would be very similar, where the only thing that changes is the filter and the value you want to assign to it in pixels, for example:
// Change breakpoint mobile
add_filter( 'astra_mobile_breakpoint', function() {
return 480;
});Code language: JavaScript (javascript)Don’t forget to change the breakpoint in the main menu
Now, it is logical that if you change the breakpoint of the theme, the main menu will accompany this change in the breakpoint, and it will change to the burger menu when the “jump” occurs.
This in Astra you can easily change this without having to touch any code, from the customizer.
Just go to the WordPress customizer section “Header -> Main menu -> Mobile menu -> Menu breakpoint“, and put the same value you assigned to the breakpoint in tablets, or mobile, whichever you prefer.
Read this post in Spanish: Cómo cambiar el punto de ruptura de tableta o móvil en el tema Astra #SemanaAstra
