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
Elliott Prendergast
5,121 PointsUse of pixels and ems?
It is mentioned in the video that we used percentages and this helps make the design responsive, however for many elements we have used pixels and ems. I am confused as to why we are using pixels, ems and percentages. Surely if we are trying to create a completely responsive design we should stick to percentages throughout?? Mixing three types of technique to alter sizing of elements seems slightly contradictory to me.
3 Answers
Codin - Codesmite
8,600 PointsA good example of where you would use pixels and em instead of percentages:
body {
font-size: 16px; /* Sets default font-size to 16px */
}
h1 {
font-size: 1em; /* Sets font size to 100% of default so : 16px */
padding: 0 25%; /* Sets padding of 25% of parent container size on left and right padding */
}
@media (max-width: 600px) {
h1 {
font-size: 0.5em; /* Sets font size to 50% of default so: 8px */
padding: 0 10%; /* Sets padding of 10% of parent container size on left and right padding */
}
}
Konrad Pilch
2,435 PointsAs above, but for example, px are good to make heights. So if you have an image thats in a 4collumn , then you want the height to be 400px as theres no other way to do it. You can do max-height, min-height etc.. to make it responsive like min-height 270px, max height 800px and this can make the iamge self-responsive on the width of the screen.
It depends how you use it, and where.
Also rem, em, px are different units to measure the px distance domesthing like that. So 1em is 15/16px. It also depends, i think, on some things like mobile or somethinig. But em, rem, px are static. usually, at least me, i use em for font-sizes, and px for height(in appropriate place). % play a big role too, but i don't use them as often apart form the main features. Later one is more of CSS tricks to get things done, using appropriate technique which can look like usng %, but that doesn't work in a lot of cases.
Id suggest to maybe try and build different CSS features to get your heading around it.
Tushar Singh
Courses Plus Student 8,692 PointsYup there's no way you can understand these things theoretically, you have to build something on your own. These measurements, float, position are a little bit tricky and confusing when you first start out but just like anything else it would make sense after you get your hands dirty.
Konrad Pilch
2,435 PointsYep. Thats the best way, getting hands dirty :) I feel it now, especially when im leanring jQuery, im like :D Understanding all this after 6days of larnign. Wheres before it was like uhh, event, function, window, and now i know that we target the window, we look for the event, for a scrolling evnt, then we can look for the scrollTop to see the position of the screen, and then say if its above 300px, we can add class to the navbar etc.. but 3days ago, i just knew i had to do it.
What i mean is that practice, and then reviewing the code is very important. I iknow how to build few things now with jQuery, simple but enough for the web(almost), and it's amazing. Iv did practice , practice and practice :D Now i understand it and i can take it with my advantage :)
Still lots ot learn but hey :)
Tushar Singh
Courses Plus Student 8,692 Points.container {
padding: 50px 50%;
}
As you can see I have used both pixels and %age, I could have used percentage unit instead of px, it actually depends on you how much responsive do you want your website. In this case I always want my top and bottom padding to be 50px but on the contrary I want padding to be responsive on the left-right side(width). I hope that clears the "contradictory" part.