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

Design

Dani Ivanov
Dani Ivanov
10,732 Points
Posted by Dani Ivanov
Dani Ivanov
10,732 Points

When and where to best use absolute and relative units.

So I have been playing with this nearly the whole afternoon and I still don't know when is best to use em, when px. and when percentages.

For responsive layout:

Which measurement unit is best to use on; margin, padding, width, height, and font-size to achieve a layout that is completely responsive ? By responsive I mean a layout that resizes according to the device's screen width.

1 Answer

Michael Williams
Michael Williams
13,005 Points
Michael Williams
Michael Williams
13,005 Points

Dani Ivanov,

In regards to responsive design and planning for mobile first, the common practice that I have seen and have began to become accustomed to, is to layout your page with px (absolute).

Once you have everything set and you begin to set your break points with the media queries, you will then begin the conversions on a case-by-case basis. These conversions can include em (relative) units for font-size and percentage (relative) units for everything else, as needed. Converting the height is a case-by-case situation for example. There are definitely more options for units but these are the main three.

I understand how you are feeling because I wanted nothing more than to understand how to make responsive websites. What I have learned is there are steps to take before it becomes responsive. Consider how some websites begin with a design on Photoshop. In order to bring this to life with HTML & CSS and to get it to look just like the Photoshop design, everything will be static or absolute. Then the relative units come into play for response to the various screen sizes.

The courses "CSS Layout Techniques" and "Build a Responsive Website" take a deeper dive into these conversions.

Regards, Michael Williams

Dani Ivanov
Dani Ivanov
10,732 Points
Dani Ivanov
Dani Ivanov
10,732 Points

Thanks for explaining! Seems logical.