Change CSS Style based on Orientation - Portrait or Landscape
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.
