DEV Community

Cover image for How to keep the webpage CSS styles only up to certain device width or maximum width?
MELVIN GEORGE
MELVIN GEORGE

Posted on • Originally published at melvingeorge.me

How to keep the webpage CSS styles only up to certain device width or maximum width?

Originally posted here!

To keep the webpage CSS styles only up to certain device width or maximum width, you can use the @media media query syntax followed by () symbols (opening and closing brackets). Inside the brackets, you can write the keyword max-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 be displayed till the device or the window width you provided.

TL;DR

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

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

    p {
      color: white;
    }

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

      p {
        color: black;
      }
    }
  </style>
</html>
Enter fullscreen mode Exit fullscreen mode

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

It may look like this,

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

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

    p {
      color: white;
    }
  </style>
</html>
Enter fullscreen mode Exit fullscreen mode

The output will look like this,

webpage with black background color and text in white color

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

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

It can be done like this,

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

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

    p {
      color: white;
    }

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

      p {
        color: black;
      }
    }
  </style>
</html>
Enter fullscreen mode Exit fullscreen mode

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

webpage background color is white and text color is black till widow width reaches 1000px

See the above code live in codesandbox.

That's all 😃!

Feel free to share if you found this useful 😃.


Top comments (0)