CODEWITHSUNDEEP
cssmedia-queries
Gourab Mazumder
Gourab Mazumder

Reputation: 49

CSS3 media query error

I want to change a webpage design if device screen width is greater than 1024px for this I using @media only screen and (min-width: > 1024px){ } but it is not working .

Please tell me what is the solution .

Upvotes: 1

Views: 1990

Answers (2)

Ahmad Baktash Hayeri
Ahmad Baktash Hayeri

Reputation: 5880

The current code that you have tried to implement will do the trick, but only if you rectify the syntax errors in it.

So, instead of

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

you could do 

@media only screen and (min-width: 1024px){ 
    /* css rules here will apply only if the size of the screen is greater than AND equal to 1024px */
}

Note: @media query values specified for the min-width|max-width will be inclusive of the value itself as well. Meaning that if you want that a particular style apply to an element exactly when the width of the screen is greater than 1024px (and not equal to it), you should change the value to min-width: 1025px.

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

Instead of using Demo

@meida only screen and (min-width: > 1024px){...}

use this

@media screen and (min-width:1024px) {...}
/* styles for browsers larger than 1024px; */ 

@media screen and (max-width:1024px) {...}   
/* styles for browsers less than 1024px; */

}

Upvotes: 1

Related Questions