SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    max-device-width

    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. #2
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    For "greater than" you can use min-device-width, like:
    Code CSS:
    @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:
    Code CSS:
    .colmid {
        display: block;
    }
    @media screen and (max-device-width: 240px) {
        .colmid {
            display: none;
        }
    }
    More info for instance on: css-tricks.com/snippets/css/media-queries-for-standard-devices

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Off Topic:

    As an aside, PPK recommends using width instead of device-widt. Not exactly sure why, but it gives better results overall.
    You don't need to check for orientation if you use width as you get screen width and not device width.

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You don't need to check for orientation if you use width as you get screen width and not device width.
    Thanks Paul.

    Quote Originally Posted by hairybobby View Post
    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;}
    }
    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. #7
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •