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:
[
{
"selectors":[
{
"name":"row",
"label":"row",
"type":1,
"active":true,
"private":false,
"protected":false
}
],
"selectorsAdd":"",
"style":{
"display":"table",
"padding-top":"10px",
"padding-right":"10px",
"padding-bottom":"10px",
"padding-left":"10px",
"width":"100%"
},
"mediaText":"",
"state":"",
"stylable":true,
"atRuleType":"",
"singleAtRule":0,
"important":0
},
{
"selectors":[
{
"name":"cell",
"label":"cell",
"type":1,
"active":true,
"private":false,
"protected":false
}
],
"selectorsAdd":"",
"style":{
"width":"100%",
"display":"block"
},
"mediaText":"(max-width: 768px)",
"state":"",
"stylable":true,
"atRuleType":"media",
"singleAtRule":0,
"important":0
},
{
"selectors":[
{
"name":"cell30",
"label":"cell30",
"type":1,
"active":true,
"private":false,
"protected":false
}
],
"selectorsAdd":"",
"style":{
"width":"100%",
"display":"block"
},
"mediaText":"(max-width: 768px)",
"state":"",
"stylable":true,
"atRuleType":"media",
"singleAtRule":0,
"important":0
},
{
"selectors":[
{
"name":"cell70",
"label":"cell70",
"type":1,
"active":true,
"private":false,
"protected":false
}
],
"selectorsAdd":"",
"style":{
"width":"100%",
"display":"block"
},
"mediaText":"(max-width: 768px)",
"state":"",
"stylable":true,
"atRuleType":"media",
"singleAtRule":0,
"important":0
},
{
"selectors":[
{
"name":"cell",
"label":"cell",
"type":1,
"active":true,
"private":false,
"protected":false
}
],
"selectorsAdd":"",
"style":{
"width":"8%",
"display":"table-cell",
"height":"75px"
},
"mediaText":"",
"state":"",
"stylable":true,
"atRuleType":"",
"singleAtRule":0,
"important":0
}
]
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 into consideration when using device configurations.
Also, it looks like the Code viewer generates CSS correctly as in this screenshot below:
Thank you.
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:
<div class="gjs-css-rules">
<style>...</style>
<style>...</style>
<style>...</style>
<style>...</style>
</div>
And you want something like this:
<div class="gjs-css-rules">
<div id="common-styles">
<style>...</style>
<style>...</style>
<style>...</style>
</div>
<div id="media-1000-styles">
<style>...</style>
<style>...</style>
<style>...</style>
</div>
<div id="media-700-styles">
<style>...</style>
<style>...</style>
<style>...</style>
</div>
<div id="media-400-styles">
<style>...</style>
<style>...</style>
<style>...</style>
</div>
</div>
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 to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.