Why does this media query not work?

HTML & CSS
1

I am styling a row of divs of class=parts. I want the width to vary by the screen width. But the width is always the same no matter the width. What’s wrong?

<style type="text/css">

.parts {margin:.2em; padding:.5em; display:inline-block; vertical-align:top;  border-radius: 8px; border: 1px solid gray; background-color: white;}
.parts {font-family: 'Arial',sans-serif; font-size: .7em;}

@media screen and (max-width:480px) {
.parts { width: 130px; }
}
@media screen and (max-width:640px) {
.parts { width: 150px; }
}
@media screen and (max-width:3000px) {
.parts { width: 170px; }
}
</style>
2

You have the media queries in the wrong order and the last one will always be true for the previous two as well.

Change their order:


@media screen and (max-width:3000px) {
.parts { width: 170px; }
}
@media screen and (max-width:640px) {
.parts { width: 150px; }
}
@media screen and (max-width:480px) {
.parts { width: 130px; }
}
3

Yes, that did it. Thank you!

4