How to change the webpage CSS styles when the device width is above certain width and below certain width?
Tags: css
Published: 2022-10-20 01:14:05

---
  title: How to change the webpage CSS styles when the device width is above certain width and below certain width?
  published: true
  tags: CSS
  date: Thu Oct 20 2022 06:44:05 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-webpage-css-styles-when-device-width-is-above-certain-width-and-below-certain-width
  cover_image: https://melvingeorge.me/_next/static/images/main-49e6e73c3c31dad681caca5a69ca5ad8.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-webpage-css-styles-when-device-width-is-above-certain-width-and-below-certain-width)
  
To change the webpage CSS styles when the device width is above a certain width and below a certain width, you have to use the media query syntax of `@media` followed by writing the [`min-width`](https://melvingeorge.me/blog/change-css-styles-when-window-or-device-width-reaches-certain-width) syntax to define the minimum width for the styles to get applied followed by writing the keyword called `and` then by writing the [`max-width`](https://melvingeorge.me/blog/keep-webpage-css-styles-only-upto-certain-device-width-or-maximum-width) syntax to define the maximum width so beyond the maximum width the CSS styles will not get applied.

So that the CSS styles are only getting applied only on certain width ranges (minimum and maximum width).

### TL;DR

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

  <!-- CSS styles for the `body` and `p` tag -->
  <!--
    Using the `min-width` and `max-width` breakpoints
    to set the minimum and maximum width range
  -->
  <style>
    body {
      background-color: white;
    }

    p {
      color: red;
    }

    @media (min-width: 600px) and (max-width: 800px) {
      body {
        background-color: black;
      }

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

For example, let's say we have a webpage where the `body` has a background color of `white` and the paragraph text has the color `red`.

The HTML and CSS code will look like this,

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

  <!-- CSS styles for the `body` and `p` tag -->
  <style>
    body {
      background-color: white;
    }

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

The visual representation of the webpage with the above styles is shown below,

![webpage with the background color of white and paragraph text with the color of red](https://melvingeorge.me/_next/static/images/webpage-default-e2262932fece1e008c984125d0dce0c1.png)

Now we aim to change the webpage `body` background color to `black` and the paragraph text color to `white` when the device width is above `600px` and till the width reaches the `800px` mark. So that the `600px` mark is our minimum width for the CSS styles to get triggered and the `800px` is the maximum width the CSS styles should be triggered.

To do that, we can use the `@media` synxtax followed by the `(min-width: 600px)` syntax then the keyowrd `and` followed by the `(max-width: 800px)` syntax.

Inside this block, we can write the CSS styles to change the webpage background color to `black` and the paragraph text color to `white`.

It can be done like this,

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

  <!-- CSS styles for the `body` and `p` tag -->
  <!--
    Using the `min-width` and `max-width` breakpoints
    to set the minimum and maximum width range
  -->
  <style>
    body {
      background-color: white;
    }

    p {
      color: red;
    }

    @media (min-width: 600px) and (max-width: 800px) {
      body {
        background-color: black;
      }

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

Below is the visual representation of the CSS styles getting triggered only when the minimum width of the device screen matches the `600px` mark till the `800px` mark.

![background color changes from white to black and paragraph text changes from red to white only when the device width reaches a minimum width of 600px and goes on till 800px screen width](https://melvingeorge.mewebpage-min-max-width-css-style)

See the above code live in [codesandbox](https://codesandbox.io/s/change-webpage-css-style-when-device-width-is-above-certain-width-and-below-certain-width-bvrpj2?file=/index.html).

That's all 😃.

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

---