1

How can I force my web app to be in landscape mode on a particular screen resolution using media query? Since I have already written media queries pertaining to specific screens, and on screen size as below : ( Please help me how can I achieve this using media queries only, other suggestions are also appreciated :-) )

@media (max-width:359px){ . . . }

@media only screen and (min-width:360px) and (max-width:480px){. . . }

@media only screen and (min-width:481px) and (max-width:640px){. . . }

/* Need to force the screen to be on landscape mode-only for this resolution */ 
@media only screen and (min-height:768px) and (max-width:1026px) and (orientation:landscape){
   #main {
       height: 100%;
-webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     -ms-transform: rotate(90deg);transform: rotate(90deg); 
  }
}
/* I tried the above code, but its not working and I don't know why :-( */

/* Need to force the screen to be on landscape-mode only for this resolution */
@media only screen and (min-width:1027px) and (max-width:1280px){. . . }

Thanks in advance...

Vignesh Sharma
  • 31
  • 8

0 Answers0