[BUG] 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)

vrudikov• March 29, 20182 reactions

@artf Created the PR

artf• March 8, 20181 reactions

Thanks for the catch guys and the great video @vrudikov, was really helpful. I'll investigate this

vrudikov• March 19, 20181 reactions

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>

[BUG] Media query rules are overridden by class rules in canvas

Question

Answers (3)

Related Questions and Answers

Css Media Query Issue

Npm start to develop on local server didn't work

Border Color Issue

Undo/Redo not working in Countdown and Navigation element

Paid Plugins That Match This Issue

Browse Plugin Categories