Difference between these two media queries (max-width, min-width).

[Hosun]

Hi,

What is the difference between max-width and min-width in the case below?

@media screen and (max-width: 1024px) { }

@media screen and (min-width: 1024px) { }

Hosun Kang

Tittle was edited by Moderator.

[Nancy OShea · Accepted solution]

In the 1st  code example, everything under & including 1024px wide  is effected by your style rule.

In the 2nd example,  everything higher than & including 1024 is effected by your style rule. To avoid conflicts, use 1025px in your 2nd media query.