How to debug css inside different media queries with Firebug and Chrome Developer tools?

"A browser or device determines the orientation by listening to the width and height of the window. If the height is larger than the width the window is in portrait mode. If the width is larger than the height it’s in landscape mode."

More info: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

Basically you need to resize your browser window for the portait orientation css to take effect.

If you open firebug within the browser window ie. firebug is at the bottom, the height of the browser window changes, causing the orientation to become landscape, thus you are losing your portrait styles. For both firebug and chrome developer tools, try launching the tools in their own window so your browser size is not affected.

PS. I would use Firebug for this kind of editing because you can clearly see the css changing as you resize the browser.

Since recently (Chrome 17), Chrome DevTools display the media query context affecting every matched CSS rule (if present). While the current implementation does not update the styles on media query evaluation changes (you need to re-select the affected node), http://webkit.org/b/74292 tracks the request to dynamically update the matched CSS rules.

As they say above you can resize your browser window to have the height be larger than the width so then the media portrait is true.You can use this url http://robnyman.github.com/matchmedia/ so resize the browser, refresh that page and you will see if is detecting true for portrait.