css - How to Remove class or activate class for specific view port only -


not sure if require javascript, or if there way css alone.

basically want have class active medium , small size browswers. example:

<style>    .big {font-size: 2em;}    .normal {font-size: 1em;} </style>  <div class="big">    <p> text huge on normal size screens.</p> </div> 

i want either able switch class ".big" @ mobile/medium view ".normal" or disable class @ view-port size.

is possible? work-arounds?

you can below.

add both big , normal class div. keep class hierarchy this.

first normal big

now can @ particular viewport, make normal's font size important value.

<style>    .big {      font-size: 2em;    }    .normal {      font-size: 1em;    }    @media (max-width: 767px) {      .normal {        font-size: 1em !important;      }  </style>    <div class="normal big">    <p>this text huge on normal size screens.</p>  </div>


Comments

Popular posts from this blog

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

javascript - oscilloscope of speaker input stops rendering after a few seconds -