Steely Wing
Steely Wing

Reputation: 17597

CSS @media not (min-width) not working

Demo

When resize the result below 400px, the @media not (min-width: 400px) not working, I know I could use @media (max-width: 399px), but I want to know why not working

Upvotes: 3

Views: 3021

Answers (2)

Arun Aravind
Arun Aravind

Reputation: 1318

min-width 400px means the device should atleast have a width of 400px. The rules you have written for min-width: 400px won't work when you resize your window below 400px.

max-width: 399px means the maximum width is 399px. rules written for max-width 399px will work when you have resized the window below 399px.

Upvotes: 0

Brewal
Brewal

Reputation: 8189

Try this :

@media not screen and (min-width: 400px)

Demo

Upvotes: 5

Related Questions