@media Don't Work Properly With Polymer Custom Css

I have 2 inputs and I want to make font-size appear small on small screens and big on normal screens but when I use custom css(ie --paper-input-container-label) @media seems not to

Solution 1:

You need to use the <iron-media-query> inside an <template is="dom-bind"> or inside a <dom-module> for it to be able to set a variable (isBetween500_700px)

  <body class="fullbleed">

    <template is="dom-bind">
      <iron-media-query query="(min-width:500px)" query-matches="{{isBetween500_700px}}"></iron-media-query>
      <template is="dom-if" if="{{isBetween500_700px}}">
        <!-- anything in here is displayed only when the display port is between 500 and 700 pixels-->
        <h1>Hello</h1>
        <p>I am inside 500x700 </p>

      </template>
      <template is="dom-if" if="{{!isBetween500_700px}}">
        <p>I am inside other</p>
      </template>
    </template>

  </body>

Plunker example

For more details see also the source code of <iron-media-query> in the /demo directory which contains a nice example https://github.com/PolymerElements/iron-media-query/blob/master/demo/index.html