CODEWITHSUNDEEP
htmlcss
Adam McGurk
Adam McGurk

Reputation: 476

Media query not responding on window resize, but working in Chrome Dev tools

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;
}}

Upvotes: 0

Views: 1558

Answers (2)

Erik
Erik

Reputation: 100

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;
}}

Upvotes: 0

masterpreenz
masterpreenz

Reputation: 2290

(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

Upvotes: 3

Related Questions