CODEWITHSUNDEEP
polymerpolymer-1.0
dman
dman

Reputation: 11064

@media query in custom element- only last setting takes effect

For some reason @media query is not working in my custom element....in this case the iron-icon. Only the the last setting takes effect, no matter what size the screen is. If I switched the order than the other last one would take effect. Any suggestions on how to fix this? 

<dom-module id="portfolio-page">
  <style>
    :host[show] {
      @apply(--layout-horizontal);
      @apply(--layout-center-justified);
      height: 600px;
    }

    @media all and (max-width: 500px) {
      iron-icon { 
        --iron-icon-height: 108px;
        --iron-icon-width: 105px;
        margin-top: -21px;
      }
    }


    @media all and (min-width: 600px) {
      iron-icon { 
        --iron-icon-height: 250px;
        --iron-icon-width: 250px;
      }
    }

        <div class="layout horizontal center-center">
          <iron-icon icon="build"></iron-icon>
          <iron-icon icon="cloud-circle"></iron-icon>
          <iron-icon icon="http"></iron-icon>
        </div>

Upvotes: 0

Views: 171

Answers (1)

robdodson
robdodson

Reputation: 6786

You're running into a limitation of the style shimmer. It sucks but there is a workaround detailed in this GitHub issue: https://github.com/Polymer/polymer/issues/2149

I also talk about it a bit in this video: https://www.youtube.com/watch?v=_VqeFubvNKw&list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo&index=4

Upvotes: 1

Related Questions