Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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,765 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.

Nevermind! I just found the anwer

Cameron Childres
Cameron Childres
11,765 Points

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

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

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

Cameron Childres
Cameron Childres
11,765 Points

Hi Alexandru,

Any of these 3 should get you there in firefox:

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