Elementor overriding media queries

Hey,

Do you mean the default media query tabs when you first install Microthemer?

If Microthemer detects that Elementor is active when it is first installed, it will use Elementor’s 2 media queries instead the usual 4. This is designed to be a convenience for Elementor users. But you can revert to the usual 4 media queries by doing the following:

1. Click the ‘Edit media queries‘ icon to the left of the tabs.
2. Click the ‘Load an alternative media query set‘ link
3. Choose ‘Desktop first device MQs‘ from the menu
4. Ensure ‘Overwrite your existing media queries?‘ is set to ‘Yes‘ if you don’t want to have the Elementor tabs present as well.
5. Click the ‘UPDATE MEDIA QUERIES‘ button to save
6. That should so it!

Or were you in fact asking something else?

Cheers,
Sebastian

Ah I see what you mean. I’ve just released version 5.2.5.3 which will fix this issue for you. Microthemer will only match Elementor’s preview width of 360 if the media query max-width value matches Elementor’s mobile breakpoint (767px by default) AND the media query label in Microthemer includes the word ‘Elementor’.

I remember that I ‘ummed and ahhed’ about this when I first added deep integration with Elementor’s responsive features. I couldn’t think of a solution that has no downsides. The workaround I’ve just implemented has a weakness in that users may customise the ‘Elementor Mobile’ and ‘Elementor Tablet’ labels for the media queries. If they remove the ‘Elementor’ bit, the tabs won’t render the preview width the same as when working in Elementor outside of Microthemer. However, the downside you just encountered is worse in my opinion!

Cheers,
Sebastian

You’re welcome Erwin, thanks so much for the kind words. Really great to hear you’ve found Microthemer useful 🙂