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 CSS Basics (2014) Basic Layout Width and Height Properties

Posted by J V
J V
4,471 Points

Not a responsive website? (Guil - CSS Basics)

In this CSS Basics Course, I am noticing (so far) that Guil is using both percentages AND px values for measurement of images, content, and divs.

Does this mean that the site he is building is not fully responsive? Is he only doing this for training purposes, or is there another reason he is using various values?

Why wouldn't he use percentages for all width, padding, margins, etc?

2 Answers

Mitchell Fargher
Mitchell Fargher
11,634 Points
Mitchell Fargher
Mitchell Fargher
11,634 Points

Sometimes you want an image or a margin to be fixed. Say you are putting a social media icon on the screen and you set the width to 25px because that is how big you want it. If you were to set the width to a percentage then that icon will grow and shrink significantly based off the screen size. On a mobile device 10% width may be satisfactory, but on a larger screen suddenly this icon is dominating a good portion of the screen.

J V
J V
4,471 Points

Thanks for the quick response, Mitchell!

Ismayil Aliyev
Ismayil Aliyev
18,560 Points
Ismayil Aliyev
Ismayil Aliyev
18,560 Points

In the workspace, if we want to define the height of the main-header it does not affect the header's height. Do you know what might be the reason for this as in case of using px it changes accordingly?