CODEWITHSUNDEEP
cssresponsive-designmedia-queries
HubCap
HubCap

Reputation: 333

Media Queries Applied for Portrait and Landscape

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)

Rendered in Mozilla

Using the code:

@media only screen and (min-width: 320px) and (max-width: 480px)

The same media query renders this in

Landscape Mode (480x320)

enter image description here

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;

}

}

Upvotes: 2

Views: 2989

Answers (1)

Satrop
Satrop

Reputation: 59

Have you tried this?

@media (min-width: 480px) and (orientation: landscape) { ... }

Upvotes: 0

Related Questions