The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Media Queries

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #33074

    On this site:

    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
    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 :(


    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 :)


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


    You also need to make sure that you’ve declared a Meta viewport tag. See slide 36 of this presentation to learn more:

    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 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.