Media request for smartphone (landscape orientation)

Question

I am developing a smartphone-friendly version of the website, and I encountered a small problem when working with a media query to target the smartphone. For portrait orientation, I use the following media query and it works fine:

@Media screen only and (max-width: 320px) {style goes here}

but when I use this media query for landscape orientation (taken from css-tricks.com), the styles that I write for landscape orientation overwrite the styles that I entered for the desktop version of my website,

The screen is for video only and (min-width: 321px) {style goes here}

This only happens when I insert styles for landscape orientation, this does not happen when I assign styles for portrait orientation.

PS I'm doing testing on the iPhone 4.

Answer 1

You need to set the maximum width for your landscape orientation, this will not overwrite your desktop styles until the width is below 800 pixels:

@media only screen and (min-width : 321px) and (max-width: 800px) { style goes here }

Another possibility is to wrap your desktop styles in a different request and copy them below your portraits and landscape styles:

 /* PORTRAIT STYLES */ @media only screen and (max-width : 320px) { style goes here } /* LANDSCAPE STYLES */ @media only screen and (min-width : 321px) { style goes here } /* DESKTOP STYLES */ @media only screen and (min-width : 800px) { style goes here } 

Note that terrain styles will be used for the Desktop version. This is sometimes a welcome behavior.