how to override properties defined in polymer using media queries

Question

assume that we have declared a property named height="" which has a certain value, let say 200px. I was wondering that is there a way that we could override this property using media queries in css?as far as I know, the inline properties has higher priority than the css styles.

this is the example code for such condition :

    @media (max-width:480px){

        custom-element{
            height: 50px;
        }
}

<body>
<custom-element height="200px">
</custom-element>
</body>

thank you in advance.

score 0 · Answer 1 · edited May 23 '17 at 10:30

0

Using !important will take give the external style precedence, and you can target the div with a style tag specifically like this:

custom-element[style] {
   height:50px !important;
}

It's good to avoid using !important as much as possible but it's one of the few ways to override an inline-style.

Similar discussion

edited May 23 '17 at 10:30

Community

1
1

answered Nov 17 '16 at 23:34

Jason

3,330
1
33
38

yeah we can use it, but it will make the important style the prime, for the whole queries and it cannot be used in a specific breakpoint. – Soheil Nov 17 '16 at 23:41

score 0 · Answer 2 · answered Nov 17 '16 at 23:34

0

You're getting attributes and inline styles confused. CSS happily overrides inline height attributes.

CSS

img {
  height: 100px;
  width: 100px;
  background-color:red;
}

HTML

<!-- Height is 100px -->
<img height="200px">
<!-- Height is 200px -->
<img style="height: 200px">

http://jsbin.com/juhuteviqi/edit?html,css,js,output

answered Nov 17 '16 at 23:34

Tristan Rice

86
9

this height attribute is only for predefined elements like img and it has nothing to do with polymer element's attributes – Soheil Nov 17 '16 at 23:39
Ah. In that case the `!important` flag is probably your best bet. – Tristan Rice Nov 17 '16 at 23:44

how to override properties defined in polymer using media queries

2 Answers2