CSS :How to handle priorities with @media

[leo46]

Hello everybody,

 

I have some issues with the @media function :

Sometimes when i have the same class for my div in different @media min-width function, one is taking over the other.

For example :

<div class="test">

@media (min-width: 1200px) {
.test {width:100%}
}

@media (min-width: 992px) {
.test {width:50%}
}

If i use my screen , which is 1920px wide, i have the .test 50% and the other is crossed (if i check with google inspect element).

Is there a rule inside the css file ? The one after the other takes over ?

Edited August 11, 2016 by leo46 (see edit history)

[vekia]

in simple words, if you will browse page with device that has screen: 1900px

both styles will be used, because:

1. 1900px is higher than min-width: 1200px
2. 1900px is higher than min-width: 992px

 

in this case, browser will always use styles defined in last instance of applicable styles definition (992px)

 

how to solve?

define max-width param to define the styles more precisely.

[Knowband Plugins]

There is no priority in the case that you mentioned here. The div (with classs test) is taking 50% width as the rule for 50% is written below it, if you swap the @media queries then it will take 100% width.

 

Moreover, it is not a good practice to have only min-width condition in your @media queries, you should always combine them with a max-width condition as well.

Edited August 12, 2016 by Knowband Plugins (see edit history)

[leo46]

Thank you, i was struggling for hours, i couldn't understand why it didn't want to use my @media min-width 1200px, and then i switched the order and "what?".

 

I didn't make the theme myself, i just do some changes so the other min-width are not from me. I also prefer to add the max-width at the end.

 

Thank you !