media query for smartphone (landscape orientation)

Question

I am developing a smartphone friendly version of a website and I am facing a little problem while working with the media query for the smartphone landscape orientation. For the portrait orientation, I am using the following media query and it's working perfectly fine:

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

but when i am using this media query for the landscape orientation (taken from css-tricks.com), the styles which I write for the landscape orientation overwrite the styles which I've put in for the desktop version of my website.

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

This is only happening when I am inserting styles for the landscape orientation, this doesn't happen when I assign styles for the portrait orientation.

P.S I am doing the testing on an iPhone 4.

Answer 1

You need to set a max-width for your landscape orientation, this won't overwrite your desktop styles until the width is lower than 800px:

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

The other possibility is to wrap your desktop styles into another query and copy them below your portrait 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 the Landscape styles will be used for the Desktop version. Sometimes this is a welcome behaviour.