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!

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) The Box Model Padding

What extension are you using to tell you the window size?

Towards the end of the video, Guil resizes the window and it tells him window size, and viewport size. What extension is this, and what is viewport referring to?

bro we use media queries to design our webpage on difference screen sizes @media (max-width: 960px) { body { background: #0000FF; } } the above media query will change the background color of our body to blue ONLY when the website's width is 960px or less if the website width passes 960px ...the media query will not work

Gunhoo Yoon
Gunhoo Yoon
5,027 Points

I think he is more curious about how to check current viewport width.

3 Answers

Gunhoo Yoon
Gunhoo Yoon
5,027 Points

If you are using Chrome just open the developer tool and re-size window. I'm not sure about other browsers.

As far as I know, viewport is just screen size that the device renders.

Update: Firefox has built-in responsive-design mode in console. You can find it on top right side within developer tool which is 2nd icon you see before the setting.

Bro.. the viewport size is the screen size of the device if you want to check your browser's viewport as you change it's width this link will help http://viewportsizes.com/mine/ go to this link and on the topmost section u will see your browser's current viewport i hope my answer helped you..

Window resizer

That the extension sorry if i respond later