Elementor overriding media queries

This topic contains 5 replies, has 2 voices, and was last updated by  Sebastian 4 years ago.

Author Posts

kboxdesign

Is there a way to fix Elementor overriding media queries? I don’t have this issue with Beaver Builder.

View post on imgur.com


Sebastian

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


kboxdesign

On the screenshot I already loaded “Desktop first device MQs” but when I click on the “Tablet & Phone” tab it shrinks the preview pane to 360px. Also, it did not load Elementor MQs automatically.


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


kboxdesign

Thanks for the quick action Sebastian, really appreciate that. A little later after I posted the issue I figured the same thing you found out. So I just created custom media queries and avoided using same values Elementor is using.

Having deep integration with Elementor is pretty awesome and helps speed things a lot. I love Microthemer and man am lucky to have a lifetime subscription 🙂 Please continue the great work you guys are doing there at Themeover! Looking forward to more cool stuff!

Thanks again,
Erwin


Sebastian

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

You must login or register to reply to this topic.