How to Update Responsive Breakpoints for Tablet+Mobile in Astra?

Previously in Astra, we had default breakpoints i.e. 544 for Mobile and 768 for Tablet devices. In the Astra v2.4.0, we are providing the feature to set the Responsive breakpoint in Astra and match them with your page builder.

Default breakpoints –

• Mobile Breakpoints – Existing and New – 544px both are the same.
• Tablet Breakpoints – 768 ( Existing ) – 921 ( New Breakpoint )

Why?

• Some users had a requirement for different breakpoints. Let’s suppose you’re building your website with a page builder and the page builder has different breakpoints ( rather than 544 & 768 ).
• When a Menu is created with a breakpoint at 921px, below which our menu turns into a Hamburger Menu so normally the colors for this device should render as Tablet, but in this case, the colors are inheriting from the desktop. Because prior to this version we had a default breakpoint of 768px for tablet. This scenario has been taken care of in this release.

So starting from the Astra v2.4.0 update you can alter Astra theme’s Tablet & Mobile breakpoints with respect to the page builder’s breakpoints.

Solution!

In our Astra v2.4.0, we have introduced new breakpoints for new users they are, for Tablet = 921px, for Mobile = 544px.

What it means for the existing users, the site or any changes won’t be affected, their breakpoints will be 768px & 544px as it worked.

If the existing users want to update their default breakpoints with some different breakpoints, they can use the following filter –

We have introduced two new filters to change the Mobile and Tablet breakpoint numbers.

To change the Mobile Breakpoint:

// 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;
});

Note: Follow the steps here in this document to add the above filter or any custom code using the Child Theme or other methods as mentioned.

For existing users, we recommend to please use the same breakpoint value for “astra_tablet_breakpoint” and from the Primary Menu > Menu breakpoint. So when your menu displays a Hamburger Menu it will load the tablet settings for both ( i.e. customizer settings & CSS styling ).

Are you facing style issues on RTL ready website?
=> We would recommend visiting the Astra Options page and refresh the page to resolve style issue. Or if the CSS File Generation is enabled try refreshing the setting.

Recommended: To have the latest version of both the Astra theme and Astra Pro Addon i.e. 2.4.0 and above.