CODEWITHSUNDEEP
htmlcss
skulpt
skulpt

Reputation: 527

HTML/CSS: @media for exact screen size

I'm trying to understand CSS a bit and I'm currently somewhat stuck with @media rules and screen sizes. I want to change the background color depending on the current resolution. Here's the CSS:

section {    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: 10px;
    background-color: brown;
}

@media screen and (max-width: 9999px) {
    section {
        background-color: red;
    }
}

@media screen and (max-width: 1000px) {   
    section {
        background-color: blue;
    }
}

@media screen and (max-width: 500px) {
    section {
        background-color: yellow;
    }  
}

Just using a simple 

<section>
    bla
</section>

HTML code. Here's a w3schools tryit link since you can easily resize your viewport. https://www.w3schools.com/code/tryit.asp?filename=FDW9EOFLTCX6 However, it does not work like I'd want it to. For the yellow background (< 500px), it stays yellow until 500 included. For the blue background (>= 500px && < 1000px), it stays blue until 1000 included. For both cases, the color jump occurs at 501 and 1001 respectively. If I adjust the width values to 499 and 999 respectively, however, the color jumps suddenly happen at 499 and 999 instead. It seems I cannot understand how to get the change to happen at exactly 500 and 1000. Or is it just a problem with the editor I posted?

Upvotes: 0

Views: 2385

Answers (2)

lalit bhakuni
lalit bhakuni

Reputation: 627

i thing the perfect responsive media query tag is this one

 @media (min-width:1600px) and (max-width:3600px) {
.model-student-gallery .modal-lg {
    width: 60%;
} 
}

you want to wright to css according to media screen . Try it it's helpful for creating responsive layout .

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

It depends where you want the 'jump' to happen, but assuming you want the background to be yellow at 500px and blue between 501px and 999px, you can simply use the following:

@media screen and (min-width: 501px) and (max-width: 999px) {
    section {
        background-color: blue;
    }
}


@media screen and (max-width: 500px) {
    section {
        background-color: yellow;
    }  
}

Don't forget that you can also use min-width as well as max-width, and that media queries will always take priority sequentially from top to bottom.

Hope this helps!

Upvotes: 1

Related Questions