Grow your CSS skills. Land your dream job.

Media Queries

  • # June 10, 2011 at 11:06 am

    On this site: http://www.jetbookingdirect.com/

    I’m trying to add some media queries….

    They are:

    @media screen and (max-device-width: 480px) {
    /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
    j.mp/textsizeadjust
    html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
    .slidercontainer {display:none}
    #wrapper {width:320px}
    #mainMenu {top:150px;}
    #cta {width:100%;height:100%;}
    a.qbutton, a.q2button, a.servicebutton, .charterbox a {width:120px;margin-left:10px;}
    #homeBoxes {margin-top:100px;width:320px;}
    #homeBoxes .homeBox {width:280px;}
    #footercontact {width:310px;}
    #footer {width:320px}

    }

    However, when I resize my browser window, they have no effect. Nothing changes? On other sites with media queries they work. I’m struggling to see what’s gone wrong :(

    # June 10, 2011 at 11:37 am

    hi,

    in case you do not have IPHONE and testing it on screen use
    @media screen and (max-width: 480px)

    it works just fine, once web is finished you replace it with
    max-device-width

    and you can be sure it works on phone :)

    # June 10, 2011 at 11:42 am

    + some older browsers ( IE ) … DO NOT support media queries by native behaviour

    just for info
    http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries
    http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/

    # June 10, 2011 at 11:46 am

    to enable MQ in old browsers go here for script and info

    https://github.com/scottjehl/Respond

    # June 10, 2011 at 11:47 am

    Okay – thanks. I’ve done that now, and the slider now disappears when I shrink the browser.

    However none of my other queries are having an effect. I want the wrapper for example to shrink to a width of 300px so everything fits.

    Any ideas? Thanks :)

    # June 10, 2011 at 11:51 am

    read this for inspiration as I did
    http://webdesignerwall.com/demo/adaptive-design/media-queries.css

    maybe silly answer but if you need 3 different widths of your wrapper
    screen, ipad, iphone

    you need 3 different queries with proper values


    @media screen and (max-width: 980px) {
    #wrapper {width: 980px;}
    }

    @media screen and (max-width: 500px) {
    #wrapper {width: 500px;}
    }

    @media screen and (max-width: 200px) {
    #wrapper {width: 200px;}
    }
    # June 10, 2011 at 11:52 am

    I’m doing the exact same as them, so far as I can see. Have even tried using their % width method. But nothing resizes :(

    # June 10, 2011 at 11:57 am

    % = for really “liquid” design
    px = well it “triggers the layout” once it reaches proper width of browser portview

    # August 9, 2011 at 5:12 pm

    You also need to make sure that you’ve declared a Meta viewport tag. See slide 36 of this presentation to learn more: http://www.slideshare.net/jameswillweb/css3-media-queries-mobile-elixir-or-css-snake-oil

    But I was having trouble with mobile and tablet not recognizing the MQs, but as soon as I added the Meta tag, it all cleared up nicely.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".