@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)

<bodyclass="fullbleed"><templateis="dom-bind"><iron-media-queryquery="(min-width:500px)"query-matches="{{isBetween500_700px}}"></iron-media-query><templateis="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><templateis="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