responsive webdesign: Media Queries not working for other screens

Question

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

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

I am using these mediaqueries and these are working fine but when I see my website at 1280px resolution, it does not work

Which one media query i have to use for 1280 to 1024 resolution? — HMS Designz, Jun 10 '14 at 07:14
Please could you explain what doesn't work? Could you post a fiddle with the specific issue? — Fabrizio Calderan, Jun 10 '14 at 07:15
Dear FabrizioCalderan my these media query are working fine but when i am checking in 1280 resolution, i want add new query for this resolution but it is getting this media query @media only screen and (min-width : 1224px) {} i want to add new media query which should work specifically for 1280 to 1024 resolution — HMS Designz, Jun 10 '14 at 07:20
@HMSDesignz - The last time I checked, working fine and not working are the opposite. Do you mean they work when the resolution is an exact match but not when the screen has a higher res? — Anthony, Jun 10 '14 at 07:46

score 0 · Answer 1 · answered Jun 10 '14 at 07:20

0

Try like this:

@media screen and (min-width: 1024px) and and (max-width:1280px)
{
 .....
}

answered Jun 10 '14 at 07:20

G.L.P

7,119
5
25
41

score 0 · Answer 2 · answered Jun 10 '14 at 07:20

0

@HMS Designz, If you want to access media query 1280 to 1024 resolution. You can try like this.

@media screen and (min-width:1024px) and (max-width:1280px) {}

answered Jun 10 '14 at 07:20

Amit Kansal

227
1
6
14

And if you are using your media query at 1280px resolution then it will pick this media query @media only screen and (min-width : 1224px) {} As here you are taking minimum 1224px and other one is greater than 1280px. HTH – Amit Kansal Jun 10 '14 at 07:23
@media i added this query but browser getting prefer first this query (min-width : 1224px) so should i remove this query? – HMS Designz Jun 10 '14 at 07:25
Where is your confusion.. browser will prefer the query you have defined. So if you want to use @media only screen and (min-width : 1824px) {} style to 1280px then just change (min-width : 1824px) to (max-width : 1824px) and (min-width : 1224px) {} to (max-width : 1224px) {} – Amit Kansal Jun 10 '14 at 07:30

score 0 · Answer 3 · edited Jun 10 '14 at 07:41

0

You are not create any media query for 1280 px resolutions. First create media query for that resolution using following media query.

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

}

edited Jun 10 '14 at 07:41

Manuel Allenspach

12,467
14
54
76

answered Jun 10 '14 at 07:25

chetanjain02

1
1

score 0 · Answer 4 · edited May 23 '17 at 11:57

@media all and (min-width: 1280px) {
 /* css for width greater than 1280px */
}

@media all and (max-width: 1280px) and (min-width: 1024px) {
 /* css for width between 1280px and 1024px */
}

@media all and (max-width: 1023px) {
 /* css for width less than 1024px */
}

Here is detailed explainition of media queries.

include this in <head></head> (if you have not)

  <meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->

change you @media style as this // change width as per your requirements

@media only screen (max-width: 500px) {
 // or as per your needs, as I try to explain below
}

Now I try to explain maybe..:)

@media (max-width:500px)

for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.

@media screen and (max-width:500px)

for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.

@media only screen and (max-width:500px)

Here is a quote straight from W3C to explain this one.

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

As there is no such media type as "only", the style sheet should be ignored by older browsers.

If

That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.

And

The keyword and.

@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

Or

Comma separate.

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

Technically these are treated like to separate media queries, but that is effectively and or.

Not

Reverse the logic with the keyword not.

@media not all and (max-width: 600px) {
  html { background: red; }
}

Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y

Exclusive

To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.

@media (max-width: 400px) {
  html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
  html { background: green; }
}
@media (min-width: 801px) {
  html { background: blue; }
}

Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.

Overriding

There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.

@media (min-width: 400px) {
  html { background: red; }
}
@media (min-width: 600px) {
  html { background: green; }
}
@media (min-width: 800px) {
  html { background: blue; }
}

Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.

Mobile First

Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.

html { background: red; }

@media (min-width: 600px) {
  html { background: green; }
}

Desktop First

Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.

html { background: red; }

@media (max-width: 600px) {
  html { background: green; }
}

You can be as complex as you want with this.

@media 
  only screen and (min-width: 100px),
  not all and (min-width: 100px),
  not print and (min-height: 100px),
  (color),
  (min-height: 100px) and (max-height: 1000px),
  handheld and (orientation: landscape)
{
  html { background: red; }
}

Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.

And for media queries priorites

sources : one two three four five

responsive webdesign: Media Queries not working for other screens

4 Answers4