Change CSS Style based on Orientation - Portrait or Landscape

On Web Development

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.

Tawhidur Rahman Dear

Article Writer

IT Consultant, App Developer, Theme and PlugIn Developer, Full Stack Web Developer, SEO Expert, Security Adviser, IT Blogger