How to change the CSS styles when the window or device width reaches a certain width?
Tags: css
Published: 2022-10-19 03:18:14

---
  title: How to change the CSS styles when the window or device width reaches a certain width?
  published: true
  tags: CSS
  date: Wed Oct 19 2022 08:48:14 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-css-styles-when-window-or-device-width-reaches-certain-width
  cover_image: https://melvingeorge.me/_next/static/images/main-2a335d315cc47cfc9837d4183c28c517.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-css-styles-when-window-or-device-width-reaches-certain-width)
  
To change the CSS styles when the window or the device width reaches a certain minimum width, you can use the `@media` media query syntax followed by `()` symbols (opening and closing brackets). Inside the brackets, you can write the keyword `min-width` followed by the `:` symbol (colon) and then by writing the width with its unit.

The CSS styles you write inside this CSS block will only be triggered if the device or the window width is matching with the minimum width you provided.

### TL;DR

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

  <!-- CSS styles -->
  <!-- 
    Using the `@media` and the `min-width` syntax
    we can define the CSS styles only to be triggered
    when the window or the device width reaches `1000px`.
  -->
  <style>
    body {
      background-color: black;
    }

    p {
      color: white;
    }

    @media (min-width: 1000px) {
      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 `paragraph` text is by default.

It may look like this,

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

  <!-- CSS styles -->
  <style>
    body {
      background-color: black;
    }

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

The output will look like this,

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

We aim to change this webpage's `body` background color to `white` and paragraph text color to `black` only when the window or the device width is above `1000px`.

To do that we can use the `@media` media query syntax followed by the `()` brackets symbol. Inside the brackets, we can write the `(min-width: 1000px)` code to define that we need to trigger the CSS styles only when the window width reaches `1000px` or the minimum width of the window is at the `1000px` mark.

It can be done like this,

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

  <!-- CSS styles -->
  <!-- 
    Using the `@media` and the `min-width` syntax
    we can define the CSS styles only to be triggered
    when the window or the device width reaches `1000px`.
  -->
  <style>
    body {
      background-color: black;
    }

    p {
      color: white;
    }

    @media (min-width: 1000px) {
      body {
        background-color: white;
      }

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

The visual representation of CSS styles getting applied is shown below,

![webpage background color becomes white and text color becomes white when widow width reaches 1000px](https://melvingeorge.mewebpage-change-styles)

This is how we can change the CSS styles when the window width or the device width reaches a minimum width.

See the above code live in [codesandbox](https://codesandbox.io/s/change-css-styles-when-window-or-device-width-reaches-certain-width-0zjk7r?file=/index.html).

That's all 😃!

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

---