How to change css tag based on switch (reactive web)

Hi there,
I want to change an app in portrait mode. I applied the following css. It works perfect.

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}


Now I build a switch to let the client switch between normal mode and portrait mode. Please check the image below:

And my css for the application:


But how can I change or add the css tag: " transform: rotate(-90deg);" when I switch to "portrait mode"?

I need a solution for a client variable? So, it is changed for the client side during his session.

Thank you for your help. 

Solution

Hi DDK,

The only way I can think of is to have two different classes, one for portrait and one for landscape, and change the class of the Container when that button is pressed.

Solution

Kilian Hekhuis wrote:

Hi DDK,

The only way I can think of is to have two different classes, one for portrait and one for landscape, and change the class of the Container when that button is pressed.

Thanks, you helped me out!

Hi DDK,

Glad I could be of help! If my answer above was indeed the solution, could you mark it as such? Thanks!