Css Media Query Issue

[YashPrince]

Hello @artf
There is an issue on demo page as well as library in media query.
Issue is that if user update style on mobile view first and then the tab view then media query do not work for mobile view. If we update style for desktop first, tab second and mobile third then everything works fine
but if we reverse the step mobile view first, tab view second and desktop view third then css/media query
will not work for tab and desktop view.

@media (max-width: 480px) {
    #if70u {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    #if70u {
        font-size: 40px;
    }
}

I think it was due to 480 should be down and 992 should be above.
Any help would be appreciated, thanks!

[YashPrince]

@artf Problem is that if we add a style mobile first and then on tab then mobile view css is override by tab view and all the css applied for the mobile view will not apply on the mobile view as it override by tab view.

[YashPrince]

@artf Any Update about this as it's a big issue. User can not update css for tab once they apply for the mobie first. They need to delete and readd that element.

[artf]

@YashPrince PRs are welcome

[Sharsie]

@artf I think this broke sorting queries with mediaCondition set to min-width, can we check for this in https://github.com/artf/grapesjs/blob/f61b41167fe339a3b96ce7fe183a094be1094fdd/src/code_manager/model/CssGenerator.js#L155 and reverse the sort order?

[artf]

@Sharsie #1996

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.