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 Customizing Colors and Fonts Resize Text

Posted by Chris Neil
Chris Neil
2,231 Points

What exactly causes elements to auto resize according to browser window width?

I'm slightly confused how Nick has made the elements resize ever so slightly in the browser when the browser is narrowed to the size of a mobile device. Can anybody explain in simple terms how this works, and does this have to do with the padding and margin properties? Many thanks

2 Answers

Martynas Matimaitis
Martynas Matimaitis
10,480 Points
Martynas Matimaitis
Martynas Matimaitis
10,480 Points

He is using relative values for styling which adapt to actual screen width.

Example: set padding to 2.5%. The padding will be equal to 2.5px when the screen width is 100px, 5px when it is 200px, 10px when it is 400px etc.

When using em's for font size and % when styling your page you basically use proportional parts of user's current screen size and that makes the design responsive.

Hope that answers your question.

Chris Neil
Chris Neil
2,231 Points
Chris Neil
Chris Neil
2,231 Points

Great, thank you!