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.