Understanding media queries with a simple example

Question

I thought media queries are really really easy. Codepen of the problem

css

.outer{
  background-color: blue;
  width: 1500px;
}

.flipcardscontainer{
  background-color: red;
  height: 50px;
}
@media only screen and (min-width : 622px) {
    .flipcardscontainer{
        width: 506px !important;
    }
}

@media only screen and (min-width : 422) {
    .flipcardscontainer{
        width: 306px !important;
    }
}
@media only screen and (max-width : 405px) {
    .flipcardscontainer{
        width: 206px !important;
    }
}

HTML

<div class="outer">
  <div class="flipcardscontainer"> 
  </div>
</div>

So what I want is that the blue square that is around the red square is always visible. Now I start dragging the window size from 400 slowly upwards to 750. It does not behave at all like I expect.

the square with the class flipcardscontainer is, looking at the css, always smaller than the device screen width, which is the browser width, right?

The only query that seems to work is @media only screen and (max-width : 405px)

Why is the result not as expected?

Answer 1

1.) I think you forgot the "px" on 422.
2.) You dont have a media query working between widths 405px and 422px.
3.) Rearrange your breakpoints, put the one with (min-width: 622px) below the others because the css rules at breakpoint (min-width : 422px) is overriding it when the viewport width is >622px.

Doing so will give you THIS

Answer 2

Working DEMO

You have two media-queries which are using the same condition.

For one of the media-query, Insert the max-width and try. It will work.

You also forgot px in second condition

@media only screen and (min-width : 622px) {
    .flipcardscontainer{
        width: 506px !important;
    }
}


@media only screen and (min-width : 422px) and (max-width: 621px) {
    .flipcardscontainer{
        width: 306px !important;
    }
}

@media only screen and (max-width : 405px) {
    .flipcardscontainer{
        width: 206px !important;

    }
}