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.