Elementor and Microthemer media queries

Hey,

How does Microthemer override elementor media queries?

By default, Microthemer overrides theme/Elementor styles by always adding !important to styles. This helps beginners successfully override styles without having to learn the rules of CSS specificity. But once you do learn the rules, it’s best to override styles by ensuring the specificity of your Microthemer selectors is equal to or greater than the specificity of the theme/Elementor selectors. You can turn global !important off via General > Preferences > CSS / SCSS.

So to be precise, Microthemer overrides styles (e.g. padding-left: 20px), which may or may not be inside media queries.

If I load mobile first device MQ’s and elementor defaults will this work? Or will elementors defaults override the mobile first device MQ’s?

Your styles will still work whatever selection of media queries you choose. Because of the !important setting, or if you ensure your selectors have the right CSS specificity.

Should I just work with elementors defaults and then add my own making sure I use max-width so matching elementors queries?

If you’re a beginner (and maybe even if you’re not), I think it’s sensible to use the same media queries that Elementor uses, which are not mobile first. It’s just simpler. Microthemer loads Elementor media queries by default – if you install Microthemer after Elementor. Otherwise, you can load Elementor media queries via General > Media queries > Load an alternative media query set.

And yes, it’s also easier to stick with max-width for consistency if there is no strong reason to use min-width. But feel free to create some min-width media queries if there is good reason. For instance, you might use min-width: 1200px to only target larger screens.

I hope that helps. Please let me know if you have any further questions.

Thanks,
Sebastian