
Kat Stacy
39,242 PointsHow do you determine the pixel size for a screen. I have no idea how to find out this information.
What kind of software or browser lets you see the pixel size for your screen? I use Modzilla Firefox and I do not see the pixel size at the bottom of my page like in the videos for this course.
4 Answers

Jason Anello
Courses Plus Student 94,576 PointsHi Kathryn,
In firefox you can press Ctrl + Shift + M
This activates responsive design mode. It will put your web page in it's own resizable window and near the top left it will tell you what the dimensions are.
This allows you to keep your main browser window maximized while you resize the page only.

Asia Chan
11,007 PointsI had the same question as well. Even as a beginner, I decided I'd like to compare the lessons & exercise approaches to the current web standards, so that's its easier to contextualize and adapt to more complicated code down the line.
This is a helpful resource: CSS TRICKS: Media Queries for Standard Devices
Please note though, that the media queries presented there include a device detection, ie., min-device-width
as opposed to min-width
. I just removed the "device" part of the properties & webkit part since "Introducing the Project" is quite simplified. I also removed the max-width
so the viewport changes automatically.
/* ----------- Mobile Phone ----------- */
@media only screen and (min-width: 300px) {}
/* ----------- Tablet ----------- */
@media only screen and (min-width: 768px) {}
/* ----------- Retina Screens ----------- */
@media screen and (min-width: 1200px) {}
For the window resizer, this one I got from one of Treehouse's weekly podcast with Nick Pettit. It's on beta so sometimes it crashes if the browser doesn't accommodate the dimensions: Chrome Extension: Window Resizer

Eric Butler
33,485 PointsIf you want the dimensions of common mobile devices, try Viewport Sizes. If you want to measure your own screen, there's probably an easy way in Firefox, but I use Chrome, and if you have that you can click the 3-vertical-dots icon, go to More Tools, then Developer Tools. This will open a new window, which you can ignore, but leave it open. Now, when you drag your main Chrome window to different sizes, you'll see the window's dimensions printed in the top-right corner of the window. Hope that helps!

Kat Stacy
39,242 PointsThat helps a lot thanks Eric! I have been having trouble determining the right size to apply to the media queries so the Chrome Dev Tools work great!
Kat Stacy
39,242 PointsKat Stacy
39,242 PointsVery neat! Thanks so much Jason! : )