Oxygen and Media Queries breakpoints

Author Posts

Bellul March 16, 2022 at 2:48 pm

The default Media Queries breakpoints in MT seems to be 1200, 980, 768, and 480. So it seems that MT does not automatically pick up the Oxygen settings, correct?

In my case I changed 1200 to 1280 and 980 to 992. When I click on “< 992” it is synced with Oxygen’s “Less than 992px”. But when I click on “< 1280” it is not synced to Oxygen’s “Page container (1280px) and below”! How should I define “<1280”, so that it is synced to Oxygen’s corresponding breakpoint? Changing the label did not help and the media query is st to “@media (max-width: 1279.98px)”.

It is a little bit confusing that if I click on
“< 480”, it chooses the width of 360px,
“< 768”, it chooses the width of 480px,
“< 992”, it chooses the width of 768px
“”Page container (1280px) and below”, it chooses the width of 992px

It seems to show the smallest width for the breakpoint. But maybe this is how Oxygen works? Can I change that behaviour?

Sebastian March 16, 2022 at 4:04 pm

Hey,

MT should default to Oxygen’s media queries if Oxygen is installed and activated before MT – however I just tested that and it didn’t work for me, so I will fix that ASAP. But, there is also an option to load a set of media queries that match Oxygen’s, which does seem to work.

  1. Go to the Edit media queries screen (click the icon to the left of the media query tabs)
  2. Set “Select a media query set” to “Oxygen MQs”
  3. Choose to overwrite the default media queries if you haven’t added any styles yet
  4. Click the Update media queries button

That should load a set of media queries with labels and breakpoints that match Oxygen. Note – MT won’t auto-update the max-width values if you make a change in Oxygen. This feature has been requested and is on the todo list.

Regarding the confusing preview widths, that behaviour is designed by Oxygen. It happens even when using Oxygen by itself. They opted to set the preview width to just above the next media query down. Elementor does something similar, in that it doesn’t set the screen width exactly at the max-width value of the breakpoint. I think the rationale is that the layout is more likely to break at the bottom end of a media query’s range.

Cheers,
Sebastian

Bellul March 17, 2022 at 6:36 am

To load the “Oxygen MQs” worked fine!

You must login or register to reply to this topic.