The background color does not change at each breakpoint

Question

I have been studying a media query, but the background color does not change at each breakpoint I set. I cannot find any solutions. Does anyone know how to change the background color when a user shrink the width of the browser ?

style.css

@media (min-width: 1200px) {
    body {
        background: orange;
        color: #742f37;
        font-family: "Caslon", serif;
    }
}
@media (min-width: 1024px) {
    body {
        background: pink;
        color: cornsilk;
        font-family: Gills Sans Extrabold, sans-serif;
    }
}
@media (min-width: 768px) {
    body{
        background: purple;
        color: white;
        font-family: "Georgia", serif;
    }
}
@media (min-width: 667px) {
    body {
        background: cyan;
        color: red;
        font-family: Gills Sans, sans-serif;
    }
}
@media (min-width: 375px) {
    body{
        background: black;
        color: yellow;
        font-family: Helvetica, sans-serif;
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Understanding the media query</title>
</head>
<body>
    <h1></h1>
    <p>I am a web designer. </p>
    <p>I am a graphic designer.</p>
    <p>I am an editorial designer.</p>

<section class="colorBoxes">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>

`@JKK` Just replace `min-width` to `max-width` for each *@media break* point. — Raeesh Alam, Feb 05 '20 at 05:59

score 1 · Accepted Answer · answered Feb 05 '20 at 06:06

Change Your Media query Order like

@media (min-width: 375px) {
    body{
        background: black;
        color: yellow;
        font-family: Helvetica, sans-serif;
    }
}
@media (min-width: 667px) {
    body {
        background: cyan;
        color: red;
        font-family: Gills Sans, sans-serif;
    }
}
@media (min-width: 768px) {
    body{
        background: purple;
        color: white;
        font-family: "Georgia", serif;
    }
}
@media (min-width: 1024px) {
    body {
        background: pink;
        color: cornsilk;
        font-family: Gills Sans Extrabold, sans-serif;
    }
}
@media (min-width: 1200px) {
    body {
        background: orange;
        color: #742f37;
        font-family: "Caslon", serif;
    }
}

https://jsfiddle.net/lalji1051/o5Lfx490/8/

score 1 · Answer 2 · answered Feb 05 '20 at 06:20

You have written everything correct. But the only mistake is you have written media queries of min-width in descending order. You have to write media queries of min-width in ascending order like this -

@media (min-width: 375px) {
    body{
        background: black;
        color: yellow;
        font-family: Helvetica, sans-serif;
    }
}
@media (min-width: 667px) {
    body {
        background: cyan;
        color: red;
        font-family: Gills Sans, sans-serif;
    }
}
@media (min-width: 768px) {
    body{
        background: purple;
        color: white;
        font-family: "Georgia", serif;
    }
}
@media (min-width: 1024px) {
    body {
        background: pink;
        color: cornsilk;
        font-family: Gills Sans Extrabold, sans-serif;
    }
}
@media (min-width: 1200px) {
    body {
        background: orange;
        color: #742f37;
        font-family: "Caslon", serif;
    }
}

Thank you so much ! I will try to do that – JKK Feb 05 '20 at 06:23 — JKK, Feb 05 '20 at 06:23

score 0 · Answer 3 · answered Feb 05 '20 at 05:56

Your min-width queries are overriding at each break point. To avoid this, use max-width for each break point and change to the expected color.

@media (max-width: 1200px) {
    body {
        background: orange;
        color: #742f37;
        font-family: "Caslon", serif;
    }
}
@media (max-width: 1024px) {
    body {
        background: pink;
        color: cornsilk;
        font-family: Gills Sans Extrabold, sans-serif;
    }
}
@media (max-width: 768px) {
    body{
        background: purple;
        color: white;
        font-family: "Georgia", serif;
    }
}
@media (max-width: 667px) {
    body {
        background: cyan;
        color: red;
        font-family: Gills Sans, sans-serif;
    }
}
@media (max-width: 375px) {
    body{
        background: black;
        color: yellow;
        font-family: Helvetica, sans-serif;
    }
}

I will modify the code. Thank you so much !! – JKK Feb 05 '20 at 06:24 — JKK, Feb 05 '20 at 06:24

The background color does not change at each breakpoint

3 Answers3