Media Queries

[Brightonmike]

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

[Brightonmike]

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

[Brightonmike]

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

[mvelic]

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.

[Author]

Posts