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

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.

This topic has been closed for replies.

Correct answer Nancy OShea

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.

Correct answer

Community Expert

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.

Nancy O'Shea— Product User & Community Expert

Sign up