Media queries not applied even if the screen size matches

user_9165569 0
Viewed 25

I have this issue: when the screen is at the right size (in this case, under 768px), the mediaquery isn't applied.

Here is my element:

<div class="container d-flex flex-column flex-md-row ">
   ...
</div>

Here are the classes:

@media (min-width: 768px) {
    .flex-md-row {
        flex-direction: row;
    }
}

.flex-column {
    flex-direction: column;
}

These are how they are applied according to Chrome Webdev Tools: how chrome applies the classes

And yes, I have this tag in my "head": <meta name="viewport" content="width=device-width, initial-scale=1.0">

Since everything matches, why isn't "flex-column" applied instead of "flex-md-row".

twitter-bootstrap css html
2 Answers

this is because of the cascading soul of CSS you have said in .flex-md-row that above 768px flex-direction should have row value

But

below that you said (inside .flex-column) that in any size flex-direction should have column value

and you set both classes to your html element... Here in CSS the latter will win the rival...(if selectors priority are equal)

try replacing your media query and other selectors

in RWD it's always better to add media queries with larger values below smaller ones just like bootstrap does

.flex-column {
    flex-direction: column;
}
@media (min-width: 768px) {
    .flex-md-row {
        flex-direction: row;
    }
}

this should work

user_86279750

use max instead of min Ex : (max-width:69px)

user_164246540
Related