Understanding the breakpoints in Media QueriesExploring the intric

Question

Understanding the breakpoints in Media QueriesExploring the intric

I have established these breakpoints

    X-Small devices (portrait phones, less than 576px) 
@media (max-width: 576px) {
  body {
    background-color: red;
  }
}

 Small devices (landscape phones, less than 768px) 
@media (max-width: 768px) {
    body {
    background-color: blue;
  }
}

Medium devices (tablets, less than 992px) 
@media (max-width: 992px) {
    body {
    background-color: green;
  }
}

 Large devices (desktops, less than 1200px) 
@media (max-width: 1200px) {
    body {
    background-color: purple;
  }
}

 X-Large devices (large desktops, less than 1400px) 
@media (max-width: 1400px) {
    body {
    background-color: yellow;
  }
}

Why does the color always stay yellow when I resize the screen instead of changing with the specified breakpoints?

html css responsive-design frontend

Answer 1

Answer №1

When setting max-width: 1400px, remember that this rule will also apply to smaller screens. To manage this, organize your CSS from largest to smallest screens so that the styles for smaller screens overwrite the values intended for larger ones. Alternatively, you can use

@media (min-width: value) and (max-width: value) { ... }

Here is an example of organizing styles from largest to smallest screen sizes:

@media (max-width: 1400px) {
  body {
    background-color: yellow;
  }
}

@media (max-width: 1200px) {
  body {
    background-color: purple;
  }
}

@media (max-width: 992px) {
  body {
    background-color: green;
  }
}

@media (max-width: 768px) {
  body {
    background-color: blue;
  }
}

@media (max-width: 576px) {
  body {
    background-color: red;
  }
}

You can also utilize the and keyword in media queries like so:

@media (max-width: 576px) {
  body {
    background-color: red;
  }
}

@media (min-width: 577px)
  and (max-width: 768px) {
  body {
    background-color: blue;
  }
}

@media (min-width: 769px)
  and (max-width: 992px) {
  body {
    background-color: green;
  }
}

@media (min-width: 993px)
  and (max-width: 1200px) {
  body {
    background-color: purple;
  }
}

@media (min-width: 1201px)
  and (max-width: 1400px) {
  body {
    background-color: yellow;
  }
}

Answer 2

When setting max-width: 1400px, remember that this rule will also apply to smaller screens. To manage this, organize your CSS from largest to smallest screens so that the styles for smaller screens overwrite the values intended for larger ones. Alternatively, you can use

@media (min-width: value) and (max-width: value) { ... }

Here is an example of organizing styles from largest to smallest screen sizes:

@media (max-width: 1400px) {
  body {
    background-color: yellow;
  }
}

@media (max-width: 1200px) {
  body {
    background-color: purple;
  }
}

@media (max-width: 992px) {
  body {
    background-color: green;
  }
}

@media (max-width: 768px) {
  body {
    background-color: blue;
  }
}

@media (max-width: 576px) {
  body {
    background-color: red;
  }
}

You can also utilize the and keyword in media queries like so:

@media (max-width: 576px) {
  body {
    background-color: red;
  }
}

@media (min-width: 577px)
  and (max-width: 768px) {
  body {
    background-color: blue;
  }
}

@media (min-width: 769px)
  and (max-width: 992px) {
  body {
    background-color: green;
  }
}

@media (min-width: 993px)
  and (max-width: 1200px) {
  body {
    background-color: purple;
  }
}

@media (min-width: 1201px)
  and (max-width: 1400px) {
  body {
    background-color: yellow;
  }
}

Understanding the breakpoints in Media QueriesExploring the intric

Answer №1

Similar questions

Understanding HTML file paths

The design of the page is structured around Semantic-UI Grid, and unfortunately, the spacing between elements cannot

Is it possible to use a JavaScript string as a selector in jQuery?

Incorrect modal placement

Parallel with one <div> and subsequently another <div>

HTML - Customizing container with background color and ensuring minimum height of 100%

"Uncovering the ways iOS disrupts background-size functionality

What is the best method for transforming an HTML file into an ICS (iCal) file?

Enhance the functionality of a directive by incorporating the ui-mask directive

What is causing all webkit browsers to overlook the z-index in my code?

Setting all lines within a textarea to have indentation

Next.js: Out of the 3 card flips, only 1 experiences a malfunction

Creating a custom loading spinner using HTML and CSS

The functionality of the click event attached with the addEventListener is

Using JavaScript/JQuery, change relative or viewport sizes to fixed sizes when the page loads

How can Watir retrieve the inner html content of a <span> element?

Generate selection choices by looping through a JSON document

Having an absolute element can lead to overflow causing a scroll

Apache causes HTML download tag to malfunction

Adjusting Bootstrap CSS Styles