I am trying to design a website that will responsively display either the desktop version or the mobile version depending on the user's device. I prefer to do this with responsive CSS as opposed to a mobile redirect.

The website in question is <http://www.raceweekend.com>. When the browser window is resized to a mobile width, the following is supposed to happen:

1. the horizontal menu should become vertical in red rectangle blocks
2. the rotating image should disappear
3. the logo should become centered at the top
4. the date (next to the logo) should disappear

The CSS behaves exactly how I want it to in both IE9 and Firefox. When I resize the window to be narrow enough, all of the above items happen.

On mobile, it just shows the regular browser version; none of the above items happen. I tested on an iPhone 4 and a Samsung Galaxy Nexus.

Here is my media query code:

```
@media handheld, screen and (max-width: 480px) {
#nav-bar {
    display:none;
}

#header {
    height:auto !important;
    width:100% !important;
}

#nav {
    height:auto !important;
}

.main-nav li {
    float:none !important;
    clear:both;
    background-color:#cf171f;
    margin-bottom:1px !important;
    padding:0 !important;
}

.main-nav li a{
    display:block;
    padding:10px 18px;
}

.main-nav li a:hover{
    background-color:#be161d;
    color:#ffffff !important;
}

#date {
    display:none;
}

#race-logo {
    width: 100% !important;
}

.center {
    margin: 0px auto;
    display: block;
}

#content, #content-sliders {
    margin-left:5% !important;
    width: 90% !important;
    padding-top:20px !important;
}

#footer {
    font-size:14px !important;
    line-height:1.5em;
}

}

```