Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Enhancing the Design With CSS Adjusting the Layout with Media Queries

Posted by JOHN GODFREY
JOHN GODFREY
4,512 Points

Window size for media queries

In the CSS basics video: Adjusting the Layout with Media Queries, Gil changes the window size to see how the CSS performs. While he is dragging the window border around, a number appears at the bottom right of his screen showing the pixel size of the browser window, but this number does not appear on my computer. Is this only a Mac property, or can I get a PC to do this? How?

4 Answers

Cameron Childres
Cameron Childres
11,820 Points
Cameron Childres
Cameron Childres
11,820 Points

Hi John,

I'm using Chrome on Windows. There are two ways I check window size:

  • With developer tools open (CTRL+SHIFT+I or Settings > More Tools > Developer Tools) the window size should automatically show in the top right corner as you drag the edges around.
  • With developer tools open click the "device toolbar" icon, which looks like two overlapping rectangles representing a phone and tablet, or use the shortcut CTRL+SHIFT+M (only works if your focus is on developer tools). At the top you'll find a number of options for different devices as well as "responsive" mode which lets you set a specific height/width and supports dragging the edges to resize. I find this especially useful when my computer won't allow me to shrink the window enough.
JOHN GODFREY
JOHN GODFREY
4,512 Points
JOHN GODFREY
JOHN GODFREY
4,512 Points

Nevermind! I just found the anwer

Cameron Childres
Cameron Childres
11,820 Points
Cameron Childres
Cameron Childres
11,820 Points

Ah you beat me to it, glad you figured it out :)

JOHN GODFREY
JOHN GODFREY
4,512 Points
JOHN GODFREY
JOHN GODFREY
4,512 Points

Actually, thank you for your answers Cameron. That is a better solution than what I found.

Alexandru Muntean
Alexandru Muntean
8,333 Points
Alexandru Muntean
Alexandru Muntean
8,333 Points

Hello! Is there a similar feature on Mozzila? Thanks.

Cameron Childres
Cameron Childres
11,820 Points
Cameron Childres
Cameron Childres
11,820 Points

Hi Alexandru,

Any of these 3 should get you there in firefox:

  • Ctrl + Shift + I
  • F12
  • Tools > Web Developer > Toggle Tools