Changing styles of custom element css properties with css media

Question

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)

Answer 1

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;
    }
}