Media query rules are overridden by class rules in canvas
Question
Hi @artf , I've noticed an issue while testing one of my templates using different device configurations that supposed to trigger media queries. My template has styles generated as following: It looks like this JSON is used to generate styles inside canvas as in this screenshot: You can see here that the '.cell' style is added last and it overrides the corresponding media query style from above and as a result it is impossible to test responsive components. So, It would be really nice if media query styles where included after their corresponding 'normal' styles to guarantee they are taken in...
Answers (3)
@artf Created the PR
Thanks for the catch guys and the great video @vrudikov, was really helpful. I'll investigate this
So now we have the following structure: And you want something like this:
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1506
Css Media Query Issue
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 t...
Issue #2044
Npm start to develop on local server didn't work
Did the procedure to start the local server using dev branch as described on README, it worked on the console, but fails on chrome and the...
Issue #1579
Border Color Issue
@artf There is bug in the border color if you drag a button on the editor and paste color like rgb(255, 0, 0) in border color and select an...
Issue #1512
Undo/Redo not working in Countdown and Navigation element
Hi @artf, when i drag countdown and navigation in live demo and click on undo/redo button then nothing happens.can you please provide some...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
How Much Does It Cost to Build a SaaS Page Builder in 2026?
How much does it cost to build a SaaS page builder in 2026? Explore realistic development costs, timelines, features, and how using GrapesJS can reduce
Tutorial
PageKit: the GrapesJS application you'd have to build anyway
A source-available Next.js app around the open-source GrapesJS core — publishing, custom domains, leads, checkout and a plugin loader.
Tutorial
UnStudio for GrapesJS: 4 Plugins to Build Better Visual Editors
Meet UnStudio, a new GrapesJS plugin studio with four tools, safer and better editor: Command Palette, Responsive Pack, Autosave & Restore, and Autofill
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.