4

I am using style attribute to use media queries in lightning components something like this:

<style>
  .legendBox {
    background: none!important;
    min-height: 50px;
    padding: 5px 0px;
    position: absolute;
    width: 90%!important;
    left:9%;
    margin-top:-15.25%!important;
    border:0px!important;
  }

  .bootstrap-sf1 .pre-scrollable {
    max-height:none!important;              
    overflow:none!important;
  }

</style>

My question is how to use these media queries in css section of lightning component. If possible please suggest the method as I am trying to submit the code for security review. Will it fail there?

1
  • why you need media queries ?You can easily style your component by .THIS.classname{//put your style here} Jun 23, 2015 at 18:04

2 Answers 2

7

Media queries are allowed in your lightning component's CSS like so:

@media (max-width: 600px) {
  .THIS .facet_sidebar {
    display: none;
  }
}

PS: all those !important flags you have there are concerning

2

This is the correct format of the media query.

@media screen and (max-width: 600px) {
  .THIS .facet_sidebar {
    display: none;
  }
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .