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

Is the height relevant? You have the answer right in your tags pretty much, did you try a "CSS media query"? — Wesley Murch, Aug 15 '12 at 19:25

score 47 · Answer 1 · answered Aug 15 '12 at 19:24

47

Try this:

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


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

answered Aug 15 '12 at 19:24

Mike Brant

70,514
10
99
103

score 11 · Answer 2 · answered Aug 15 '12 at 19:24

11

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%;
    }
}

answered Aug 15 '12 at 19:24

Stieffers

752
3
13

score 2 · Answer 3 · answered Aug 15 '12 at 19:23

2

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

answered Aug 15 '12 at 19:23

Ties

5,726
3
28
37

score 1 · Answer 4 · answered Jul 04 '19 at 05:23

1

@media (min-width: 1024px) and (max-width: 1920px) {

html { background: red; } }

answered Jul 04 '19 at 05:23

user3690329

11
2

Could you add some explanation what your code does and how it's different from other answers – Cray Jul 04 '19 at 05:27

Media Queries: Screen > 1024

4 Answers4

Linked