How to use particular CSS styles based on screen size / device

Use @media queries. They serve this exact purpose. Here’s an example how they work:

@media (max-width: 800px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
}

This would work only on devices whose width is equal to or less than 800px.

Read up more about media queries on the Mozilla Developer Network.

Leave a Comment