CODEWITHSUNDEEP
cssmedia-queriesflexbox
Michael
Michael

Reputation: 525

Why is my media query not working with Flexbox?

I'm building mobile first and using flexbox. I have three columns..

<div id="container">
   <div id="one"></div>
   <div id="two" class="hidden"></div>
   <div id="three" class="hidden"></div>
</div>

On mobile I want the hidden class hidden.

Although I'm designing mobile first the first CSS read is:

   #container {
            width: 87%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

Then I use a media query to hide the .hidden.

@media screen and (max-width: 360px) {
            .hidden {
                display: none;
            }
        }

Then I go into Desktop styles and style the three divs like so 

@media screen and (min-width: 600px) {
 #container {
                width: 93%;
                margin: 0 auto;
                display: flex;
                flex-direction: row;
            }

}

Why is it that the last two divs with the class of hidden are not hiding on mobile?

Fiddle

Upvotes: 1

Views: 3300

Answers (1)

pdoherty926
pdoherty926

Reputation: 10379

Your mobile device is probably wider than 360px. Figure out what the correct width is and adjust your stylesheet accordingly.

Also, when possible, you should consider using a more generic media query (e.g. (orientation: portrait)) in order to avoid having to hard-code widths in your stylesheets.

Upvotes: 4

Related Questions