媒体查询在调整窗口大小时没有响应，但是可以在Chrome Dev工具中使用

Question

So I'm trying to have a "list" (not an html list, but just 6 concurrent pictures in a logical fashion) of pictures that go down, but at a certain breakpoint, two move next to each other, and the media query is working in the Chrome dev tools and on Adobe Dreamweaver live preview on the phone, but on browser resize, the media query doesn't respond. Here is the html :

    <div class="gray-bg">
          <!-- Item 1 -->
            <div class="flexbox-row">
              <div class="sec-heading space-between">
                   <img src="assets/images/header1Web.png" class="img-responsive" alt="Cinque Terre" usemap="#plus">
              <map name="plus" id="plus"><area alt="" title="" href="#" shape="poly" coords="1904,371,1898,358,1890,351,1782,423,1917,426,1917,300,1891,321,1875,340,1803,401,1790,415,1782,418" /></map>
              </div>
            <!-- Item 2 -->
              <div class="sec-heading space-between">
                   <img src="assets/images/header2Web.png" class="img-responsive" alt="Cinque Terre">
              </div>
            </div>
          <!-- Item 3 -->
            <div class="flexbox-row">
              <div class="sec-heading space-between">
             <img src="assets/images/header3Web.png" class="img-responsive" alt="Cinque Terre">
             </div>
          <!-- Item 4 -->
              <div class="sec-heading space-between">
             <img src="assets/images/header4Web.png" class="img-responsive" alt="Cinque Terre">
             </div>
          </div>
          <!-- Item 5 -->
            <div class="flexbox-row">
              <div class="sec-heading space-between">
             <img src="assets/images/header5Web.png" class="img-responsive" alt="Cinque Terre">
             </div>
          <!-- Item 6 -->
              <div class="sec-heading space-between">
             <img src="assets/images/header6Web.png" class="img-responsive" alt="Cinque Terre">
             </div>
             </div>
    </div><!-- / .gray-bg -->

And here is the appropriate CSS :

.flexbox-row {
    display: block;
}
@media only screen and (min-device-width: 1446px) {
.flexbox-row {
    display: flex;
}}

Answer 1

(min-device-width: 1446px) is different from (max-width: 1446px) , min-device-width is checking if you have a screen width of 1446px while (max-width: 1446px) is if you have current width of 1446px. No matter how you resize it the screen width is still the same.

Hope that helps

Answer 2

to make the flexbox-row react "when the maximum width of the screen is 1446px" the code is:

@media only screen and (max-device-width: 1446px) {
.flexbox-row {
    display: flex;
}}

and not

@media only screen and (min-device-width: 1446px) {
.flexbox-row {
    display: flex;
}}