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 Adjust the Profile Page and Header

Posted by biagiomessina
biagiomessina
8,106 Points

Best practice for minimum size to use px instead of % and still be responsive?

I understand the reason to use percentages instead of pixel values in order to keep pages responsive. However, I notice sometimes Nick Pettit will use small pixel values instead of percentages in various places -- usually something like 80px, though I think I've seen something like 200px a few times.

Just wondering if there's a "cutoff" pixel size or rule of thumb for choosing to use pixels instead of percentages.

Thanks, Biagio

2 Answers

mikes02
mikes02
Courses Plus Student 16,968 Points

It's likely a matter of personal preference. For me, I try to use relative units as often as possible when working in responsive projects using em and/or % as needed. The only time I tend to use pixel values is for things like borders. Personally I think this is a better practice than using px, which do not have the same flexibility.

Nijad Kifayeh
Nijad Kifayeh
6,092 Points
Nijad Kifayeh
Nijad Kifayeh
6,092 Points

I think there is more to it than that? For ex. imagine you want a fixed size "gap" b/w two images (which are both sized using % values)...if you use % values for the margin of each image, then that gap will get progressively wider as you scale up the viewport. Using px instead of % in this case will allow you to maintain the structure you want.