Description:
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
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 1.4.0.3 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.
Cheers,
