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 How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

jason adams
jason adams
593 Points
Posted by jason adams
jason adams
593 Points

Media Queries / Responsive Design

I understand how we can set media queries breakpoints for different devices. But working through the portfolio site I was a little confused looking back at the main.css file at the following #wrapper selector that set max-width: 940px. Why wouldn't this be using a % instead of a px? Can somebody explain this? Would using a % make this more of a responsive design because it is affecting the width. I am a little confused by this. Thanks

2 Answers

Jacob Mishkin
Jacob Mishkin
23,117 Points

Jason, you are totally right! You should start thinking about using alternative units of measurement, like em, %, and rems. Since this is the first project in Treehouse, its just teaching you about using things like max and min width's, and basic media query's. Once you go further you will get into using other units. If you want to learn more about responsive design I highly recommend reading Brad Frost's blog:

http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/

there is a lot of good insight there. If you want take a read. I hope this helps.

jason adams
jason adams
593 Points
jason adams
jason adams
593 Points

Yes your response was very helpful and I will take a look at the Blog link you sent. Thank you very much.

Miroslav Kovac
Miroslav Kovac
11,454 Points
Miroslav Kovac
Miroslav Kovac
11,454 Points

You cannot use a % value in media query condition. Your screen is always 100% width. It cannot be 50% of itself. Also, if you change the width of browser window the screen is always 100% witdh. It can be for example 769 px or 940px but in both cases is it 100%.