CODEWITHSUNDEEP
csspolymer
user2229100
user2229100

Reputation: 191

Polymer paper-input font size media query issue

Im using goole's polymer component paper-input.

I want this paper-input to be responsive ,so ive used media queries w.r.t to the input font size but the meida query doesnt seem to take effect.

media query used: 

@media (max-width: 500px) {
        paper-input {
          font-size: 13px !important;
          --paper-input-container-input: {
            font-size: 13px !important;
          }
          ;
        }

Fiddle

http://jsfiddle.net/za1gn0pe/11/

Basically i want the font size of the input text to change as per the screen size and be reponsive.

Upvotes: 0

Views: 228

Answers (1)

sfeast
sfeast

Reputation: 956

Per https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-api

Polymer’s custom property shim evaluates and applies custom property values once at element creation time.

& it appears that setting custom properties in media queries happens after creation time. So you should be able to figure something out with the updateStyles API (also in that linked section) which re-evaluates custom properties.

Upvotes: 0

Related Questions