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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

px vs %

As far as I understood, in order to make the website responsive, we should use the values in "%" because the visual effect changes according to the available space.

Why are we mixing up values in % and px?

example:

.profile-photo{ float: left; margin:0 5% 80px 0; }

or

h2{ font-size: 0.825em; margin-bottom:20px; }

Should we use always values in %?? At least for better practice reasons...

4 Answers

Steven Parker
Steven Parker
231,198 Points

:point_right: It's not really a "best practice" issue, it's more of a design decision.

Even in responsive layout, there will be places where fixed units will be desired for appearance or effect, such as the vertical margins in your example.

It's up to the designer to determine what works (and looks) best for each situation.

Dear Steven,

Thank you for your response. I can understand your point about being a design decision but when you say

"there will be places where fixed units will be desired for appearance or effect, such as the vertical margins in your example."

you are making a differentiation (or not??) between "width" and "height" and different screens change in both width and height, not only width. That's what's confusing me.

Nuno Nunes:

Pixels are fixed, absolute units, which have precise control over an element's size & maintain its proportions. Percentages (%) are relative to the parent element & adjusts the element based on the parent container. Percentages are fluid. Ems & rems are also relative units.

"Percentages (%) are relative to the parent element & adjusts the element based on the parent container. "

Exactly, so why in the video where the instructor was making the website looking good for various screen sizes, he used relative units for widths and absolute for heights?

Nuno Nunes:

I don't know. I'm venturing a guess that it might have to do with preventing collapsed margins using pixels which create absolute heights. The widths would be relative to the width of the device viewport (phone, tablet, or desktop) itself.

Ok. I thought it would be a more obvious reason that I wasn't understanding.

Thank you both for your help!

Nuno Nunes:

You're welcome.