0

I am trying to make responsive web and I have a little issue. Whenever I want to change some custom css property based on css media, it won't apply.

For example: I am trying to change size of iron-icon based on currently active CSS media. I have following:

<iron-icon icon="battery" class="battery"></iron-icon>

and CSS:

iron-icon.battery {
  --iron-icon-height: 2.3em;
  --iron-icon-width: 2.3em;
}

@media screen and (max-width: 1000px) {
    iron-icon.battery {
      --iron-icon-height: 1.5em;
      --iron-icon-width: 1.5em;
    }
}

current output: only 1 size is selected and the other one is ignored. For example, if I open window in resolution less than 1000px wide, 1.5em is selected. When I open window with more than 1000px wide, 2.3em is selected. But when I manually change size of window while site is laoded, other @media is not applied.

Is there a way to achiev this without using javascript (I am trying to avoid setting new class and removing old)

Kuba Šimonovský
  • 2,013
  • 2
  • 17
  • 35
  • I've written a quick fiddle [here](https://jsfiddle.net/f59y7yg7/) which I hope replicates your code. Also I've written a version using a `min-width` media query, which (I believe) is a better way of developing for the responsive web as you can progressively enhance up ("mobile first" methodology), rather than continually overwrite CSS as you scale down (probably encountering lots of specificity issues - which I believe may be contributing to your problem). Can you let me know if the examples work for you? – Tom Oakley Oct 13 '17 at 08:36
  • @TomOakley thanks for your time. Actually in my application I wasn't able to do "mobile first". Because we had no time in company and i had to make application in very short time for computers only. And of course now we have to implement also mobile. And rewriting whole project is nonsense. Unfortunetaly what you posted is for normal CSS properties. In polymer there special properties that get propagated to custom elements so you can style them. And this is the core of the problem. They just don't get updated when media query is applied – Kuba Šimonovský Oct 13 '17 at 08:56
  • Ah sure, I assumed the polymer tags and CSS were inconsequential and that the CSS was causing the issue. Never used Polymer so I'll leave that to you. Sorry. – Tom Oakley Oct 13 '17 at 09:02

1 Answers1

2

Right now it seems like your CSS is targeting an element with the class "iron-icon" and "battery". Where in fact you want to target the element with a class of "battery".

Simply remove your dots before iron-icon.battery. 

iron-icon.battery {
  --iron-icon-height: 2.3em;
  --iron-icon-width: 2.3em;
}

@media screen and (max-width: 1000px) {
    iron-icon.battery {
      --iron-icon-height: 1.5em;
      --iron-icon-width: 1.5em;
    }
}
Rediche
  • 44
  • 1