How to change the webpage CSS styles when the user changes the device orientation to landscape?
Tags: css
Published: 2022-10-17 22:05:19

---
  title: How to change the webpage CSS styles when the user changes the device orientation to landscape?
  published: true
  tags: CSS
  date: Tue Oct 18 2022 03:35:19 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-webpage-css-styles-when-user-changes-device-orientation-to-landscape
  cover_image: https://melvingeorge.me/_next/static/images/main-49651d25b0c0e3a9435409602d0c89e8.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-webpage-css-styles-when-user-changes-device-orientation-to-landscape)
  
To change the webpage CSS styles when the user changes the device orientation to 'landscape', you can use the media query syntax of `@media` followed by an `()` symbol (opening and closing brackets) and inside the brackets, you can write the keyword called `orientation` followed by a `:` symbol (colon) then the keyword called `landscape` to set the mode when the user changes the orientation to landscape.

After the `()` symbol, you can use the `{}` symbol (opening and closing curly brackets) and define the styles that need to be applied when the orientation of the device changes to the landscape.

### TL;DR

```html
<html>
  <body>
    <p>Hello World</p>
  </body>

  <!-- CSS styles for the body and the paragrapgh tags -->
  <!-- 
    @media syntax and the `landscape` orientation syntax 
    to change styles when the user changes orientation
  -->
  <style>
    body {
      background-color: black;
    }

    p {
      color: white;
    }

    @media (orientation: landscape) {
      body {
        background-color: white;
      }

      p {
        color: black;
      }
    }
  </style>
</html>
```

For example, let's say we have a webpage where the background color of the `body` is `black` and the color of the `paragraph` text is white by default like this,

```html
<html>
  <body>
    <p>Hello World</p>
  </body>

  <!-- CSS styles for the body and the paragraph tags -->
  <style>
    body {
      background-color: black;
    }

    p {
      color: white;
    }
  </style>
</html>
```

The webpage will look like this with the above styles,

![webpage with black color background and text in white color](https://melvingeorge.me/_next/static/images/default-webpage-styles-applied-915795267a00e8968fd7d9901f912761.png)

We aim to change the background color of the body to `white` and the `paragraph` text color to `white` when the user changes the orientation of the device to `landscape` mode.

To do that, we can use the `@media` rule followed by the `(orientation: landscape)` syntax to trigger the styles for it.

It can be done like this,

```html
<html>
  <body>
    <p>Hello World</p>
  </body>

  <!-- CSS styles for the body and the paragrapgh tags -->
  <!-- 
    @media syntax and the `landscape` orientation syntax 
    to change styles when the user changes orientation
  -->
  <style>
    body {
      background-color: black;
    }

    p {
      color: white;
    }

    @media (orientation: landscape) {
      body {
        background-color: white;
      }

      p {
        color: black;
      }
    }
  </style>
</html>
```

Now when the user changes the viewport orientation, width, or height in such a manner, the webpage CSS styles are interchanged accordingly.

A representation of the CSS styles getting changed on different viewport widths is shown below,

![Webpage changes styles when the viewport width is changed](https://melvingeorge.meviewport-width-changed)

That's all 😃.

See the above code live in the [codesandbox](https://codesandbox.io/s/change-webpage-css-styles-when-user-changes-device-orientation-to-landscape-n3n1uk?file=/index.html).

### Feel free to share if you found this useful 😃.

---