Highlighted

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

Engaged ,
May 03, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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.

Views

142

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Engaged ,
May 03, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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.

Views

143

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 03, 2019 0
Adobe Community Professional ,
May 03, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2019 2