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

Question

Not sure if this would require Javascript, or if there is a way to do this with CSS alone.

Basically I want to have a class active only for medium and small size browswers. Example:

<style>
   .big {font-size: 2em;}
   .normal {font-size: 1em;}
</style>

<div class="big">
   <p> This text is huge on normal size screens.</p>
</div>

I want to either be able to switch the class ".big" at mobile/medium view to ".normal" or even disable that class at that view-port size.

Is this possible? Even with any work-arounds?

Answer 1

you can do something like below.

Add both big and normal class to the div. But keep the class hierarchy like this.

First normal then big

now you can say at a particular viewport, make the normal's font size with 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 is huge on normal size screens.</p>
</div>

Answer 2

you could use media queries on the same class.

here is an example:

.big{
        background-color: red;
    }
@media screen and (max-width: 300px) {
    .big{
        background-color: lightblue;
    }
}

check out a tutorial about this

Answer 3

you can do that with media queries:
This code work with me perfectly on all devices:

@media only screen 
  and (max-width: 320px){

 .big {font-size: 2em;}
   .normal {font-size: 1em;}
}

check this out link for more details