Menu
How to debug css for orientation:portrait in Chrome Developer tools?
What ever I write inside (orientation:portrait) can't edit on the fly from Firebug and Chrome Developer tools. It always shows the normal Properties.
/*normal styles here */
#wrap {
width:1024px;
}
@media only screen and (orientation:portrait){
/* portrait styles here */
#wrap {
width:768px;
}
}
470
Use the Media Query Inspector to inspect and trigger the registered breakpoints on a page. In Device Mode, click the icon which looks like staggered bars in the upper left corner of the page, the MQI opens. You can trigger the various breakpoints with a click on a bar.
"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.
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
