Media Queries: Screen > 1024

Question

I'm trying to apply media queries in a site but my knownledge is not deep in this topic, so basically I want to apply a specific style to a tag when the detected screen is greater than 1024*768.

I did this

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

}

but the I've to identify when the resolution is greater than 1024

Answer 1

Try this:

@media only screen and (min-width : 1025px) {
    .classname {
        /* styles here */
    }
}


@media only screen and (max-width : 1024px) {
    .classname {
        /* other styles here */
    }
}

Answer 2

@media all and (min-width: 1024px) {
  #css {
    foo : bar;
  }
}

Answer 3

Use a standard media screen query. The query will trigger the style changes once the width is 1024px or greater.

@media screen and (min-width: 1024px) {
    /* Styles go here */
    #layout {
        width: 90%;
    }
}