Editor CSS ordering for breakpoints not correct


I have a video Element with Relative Styling to set a specific width for each breakpoint. This works in the frontend but in the editor it doens not because the styles seem to override each other in the wrong order:

There is a class applied to the video block that does relative styling for the video element in the wrapper to do a cover layout. Then I adjust the witdh in the relative style for every breakpoint:

Environment info

  • WordPress version: 6.4.3
  • Cwicly Plugin version:

Hi @jan,

Are you intending on using a mobile-first approach or a desktop-first approach with your breakpoints?

Based on your CSS, it appears you are currently using mobile-first, in which case, what about this is working differently than you expect?

Also, which is your base breakpoint?

Hi @StrangeTech ,

I activated the Tailwind breakpoints. So, mobile first:

I began working on this prior to where the missing TW base breakpoint was added.

It works differently than in a browser. As you can see in the Styles Inspector tab in the second image, the min-width: 648px breakpoint overrides the min-width: 768px breakpoint even though the editor is in md: 951px width. So both breakpoints apply but the larger one should override the smaller one.

And this is what is not done correclty here. But in the frontend in a browser (Edge in this case) the order (and layout) is correct:

I rebuilt everything and the problem persists.

Hello @jan,

Thanks for this report.

Indeed, there seems to be an media order misconstruction for global classes.
My apologies for the trouble here.

We’ll have this fixed as soon as possible.


1 Like

Hello @jan,

Thanks for the report once again.
This should be addressed in 1.4.1.