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
Nuno Nunes
8,849 Pointspx 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
229,787 Points
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.
Kathryn Notson
25,941 PointsNuno 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.
Nuno Nunes
8,849 Points"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?
Kathryn Notson
25,941 PointsNuno 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.
Nuno Nunes
8,849 PointsOk. I thought it would be a more obvious reason that I wasn't understanding.
Thank you both for your help!
Kathryn Notson
25,941 PointsNuno Nunes:
You're welcome.
Nuno Nunes
8,849 PointsNuno Nunes
8,849 PointsDear 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.