Media Queries Applied for Portrait and Landscape - css

Question

I'm currently building a small website including RWD features to enable it to work well on mobile devices.
My media queries seem to work correctly in portrait mode. However, when I rotate the devices the rules don't seem to apply any more.
Portrait Mode (320x480)
Using the code:
#media only screen and (min-width: 320px) and (max-width: 480px)
The same media query renders this in
Landscape Mode (480x320)
As you can probably make out, my media queries adjust the font size depending on the width of the screen. Strangely, the font in the Landscape view does not change even though the media query applies to it too.
The full code of the media queries:
/*................................
MEDIA QUERIES - Phones
..................................*/
#media only screen and (min-width: 320px) and (max-width: 480px) {
/*............................
FONTS
..............................*/
html {
font-size: 70%;
}
p.promo {
line-height: 1.4em;
}
}
/*..............................
LAYOUT
................................*/
.clientLogo {
float: left;
height: 60px;
width: 60px;
margin: 10px 10px 10px 30px;
background: $moondust;
}
/* Phones - Landscape */
/*................................
MEDIA QUERIES - Tablets
..................................*/
#media only screen and (min-width: 481px) and (max-width: 768px) {
/*............................
FONTS
..............................*/
html {
font-size: 85%;
}
p.promo {
line-height: 1.5em;
}
/*.............................
LAYOUT
...............................*/
.clientLogo {
float: left;
height: 80px;
width: 80px;
margin: 10px 30px 10px 30px;
background: $moondust;
}
}
/*................................
MEDIA QUERIES - Desktops
..................................*/
#media only screen and (min-width: 769px) {
/*............................
FONTS
..............................*/
html {
font-size: 100%;
}
/*...............................
LAYOUT
.................................*/
.clientLogo {
float: left;
height: 120px;
width: 120px;
margin: 10px 30px 10px 30px;
background: $moondust;
}
}

Answer 1

Have you tried this?
#media (min-width: 480px) and (orientation: landscape) { ... }