CSS CSS Layout Basics CSS Layout Project Introducing the Project

Kat Stacy
Kat Stacy
39,242 Points

How 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

Hi 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.

Kat Stacy
Kat Stacy
39,242 Points

Very neat! Thanks so much Jason! : )

I 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

If 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
Kat Stacy
39,242 Points

That 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!