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 Media Query Basics

Posted by Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Tool showing screen size & viewport size

Hi,

What's Guil using here? I mean when he resizes the browser window he get a pop-up in the bottom right corner showing the sizes?

Thanks for answering.

4 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Nejc, it looks like the Window Resizer extension.

Jerko Begic
Jerko Begic
6,990 Points
Jerko Begic
Jerko Begic
6,990 Points

Firefox 15 (or later) has a Responsive Design tool. Just go to Tools -> Web Developer- > Responsive Design View. This extension will add more a list of screen resolutions (presets) to your Firefox to test the site on different sized screens, and the list contains number of common standard resolutions (including Apple, Google Nexus, Kindle Fire HD devices)

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Thank for the answer.

Anything similar like this for Firefox?

Marcus Parsons
Marcus Parsons
15,719 Points

Check out Firesizer, Nejc Vukovic!

programmer2021
seal-mask
.a{fill-rule:evenodd;}techdegree
programmer2021
Full Stack JavaScript Techdegree Student 23,052 Points
programmer2021
.a{fill-rule:evenodd;}techdegree
programmer2021
Full Stack JavaScript Techdegree Student 23,052 Points

If you use Chrome it has similar responsive testing features :

Chrome -> More tool -> Developer Tools

Click on the mobile icon at the top left corner (Toggle device mode).