Max-device-width

HTML & CSS
1

I have written the following

@media screen and (max-device-width: 240px) {
.colmid {
display: none;
}
}

I want to write this

@media screen and (max-device-width: >240px) {
.colmid {
display: none;
}
}

How do I get this to work on media devices greater than 240?

2

For “greater than” you can use min-device-width, like:

@media screen and (min-device-width: 241px) {
    .colmid {
        display: block;
    }
}

An other way could be to set first the common styles for > 240px, and use the media-query to overrule that for <=240px:

.colmid {
    display: block;
}
@media screen and (max-device-width: 240px) {
    .colmid {
        display: none;
    }
}

More info for instance on: [U]css-tricks.com/snippets/css/media-queries-for-standard-devices[/U]

3
Off Topic:

As an aside, PPK recommends using width instead of device-widt. Not exactly sure why, but it gives better results overall.

4

You don’t need to check for orientation if you use width as you get screen width and not device width.

5

Well I used this solution

@media screen and (min-width: 481px) and (max-width: 10000px) {
.phonemenu{display:none;}
}

@media screen and (min-width: 200px) and (max-width: 480px) {
.desktopmenu{display:none;}
}

So this covers the two main categories phone users(481 plus) and non phone users (200-480px).

6

Thanks Paul.

In the first of those, you don’t need the max-width part, as without it, everything above 481px will be covered. Likewise, in the second, you don’t need the min-width, as everything below 480px will be covered.

I would probably go above 480px though. Remember that the iPhone5 is 568px wide in landscape, and there are other handheld devices that are wider than that these days.

7

Ralph: Yes I was starting to realise that 480 is not wide enough. The crossover point seems to be what you say is in the 500’s. With a 500 screen you can just about have two columns…

8

You need to forget about devices and device width as such and concentrate on the layout instead.

Increase your browser’s window from large to small and then adjust the design at the breakpoints that the design needs. There is no need to know about device widths specifically as you will collect them all on the way.

You create a fluid layout and at certain widths things may not work properly or look awkward so you throw in a media query for that breakpoint and all is well. A few well placed media queries and good design decisions will collect all devices on the way without you having to look them up.

It’s impossible these days to use that old approach of specific widths for specific devices because there are now hundreds of devices all at different widths and they are constantly changing. You just need to concentrate on the design as that is thing that will need to change depending on the width (or height as well if using fixed elements). This will of course be different for every design which is why its important to concentrate on the layout at hand and mostly forget about device widths.