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

Amandeep Pasricha
Amandeep Pasricha
14,932 Points

Does adjusting the browser window change the value of the 'viewport'?

Hi,

This is a conceptual question.

Viewport Definition: The viewport is the user's visible area of a web page (MDN)

So when you are changing the browser's window size, are you actively changing the browser's viewport, is the viewport more of a strict definition, as it is simply the MAXIMUM width of content that is allowed to be displayed? So in the video, a max-width of 960px, means that the device only showcases 960px of content width, which is that devices viewport, regardless of whether you change the browser window?

Thanks

2 Answers

Louise St. Germain
Louise St. Germain
19,412 Points

Hi Amandeep,

Yes, you can change your viewport size by resizing the browser window. The website What is my Viewport is a neat way to see this in action if you want to try it out: it tells you how big your viewport is, and if you resize your browser window, you will see it update in real-time with your new viewport dimensions.

I hope this helps!

Mark Wilkowske
MOD
Mark Wilkowske
Treehouse Moderator 17,495 Points

Hi Amandeep, the media query is the definition. @media (max-width:600px){} means: when the viewport is from 1px to 960px the rules in the media query apply. When the viewport is 961px and larger the rules do not apply. Think of the viewport as the browser's width.

Amandeep Pasricha
Amandeep Pasricha
14,932 Points

Mark Wilkowske Louise St. Germain If some of the content on your web-page requires a scroll bar to see, does that mean the content is outside of the browser's viewport?