On

If you want to change the style of your website based on device orientation, meaning based on Portrait or Landscape, then you should know it's possible with a simple CSS trick. Here is the Code and Live Preview.



@media screen and (orientation:landscape) { 

🌟 

}

Hello World, I am an example. Kindly change the orientation of your device, and if you are on PC, resize the browser. The Background color will change.

 

<style>

 
.olp {
      background: yellow;
   }

@media screen and (orientation:portrait) {
   .olp {
      background: #cdc6ff;
   }
}


</style>

 

<p class="olp">Hello World, I am an example. Kindly change the orientation of your device, and if you are on PC, resize the browser. The Background color will change.</p>




Note that, you can use code for both Portrait or Landscape, but it sometimes may create conflicts. Besides that websites are normally Portrait which means you need to write code only for Landscape. See above, codes are different.