jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<div class="ratio">

  <div class="div">
    
    
    
  </div>
  
</div>

SCSS

$div-width = 200px;
 $div-height = 400px;
 
 body {
  width: 100%;
  height: 100%;
}

.ratio {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  /* set your div max-size here  */
  max-width:  $div-width;
  max-height:  $div-height;
  
  @media screen and (max-width: 200vh) {
    width: 100vw;
    height: 50vw;
    
  }

  @media screen and (min-width: 200vh) {
    width: 200vh;
    height: 100vh;

  }

}

.div {
  width: 100%;
  height: 100%;
  background: red;
  text-align: center;
}