CODEWITHSUNDEEP
google-chromecssfirebugmedia-queries
Jitendra Vyas
Jitendra Vyas

Reputation: 152687

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

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;
   }
}

Upvotes: 12

Views: 11500

Answers (4)

Jitendra Vyas
Jitendra Vyas

Reputation: 152687

Finally now It's possible in Firefox 16 responsive mode. Check Youtube video here http://www.youtube.com/watch?v=t07cLJhJkjQ

enter image description here

Upvotes: 0

Santiago Rebella
Santiago Rebella

Reputation: 2449

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.

Upvotes: 0

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

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.

Upvotes: 2

marissajmc
marissajmc

Reputation: 2603

"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.

Upvotes: 4

Related Questions