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

Posted by Lee Cockcroft
Lee Cockcroft
5,147 Points

CSS box-sizing,max-width, percentage

Hi All,

Just got a few questions regarding css.

Ive always used "px" with my units, which obviously doesnt adapt to mobile screen etc.

Without going down the route of bootstrap, and responsive design, could someone clear a few things up for me please?

Firstly max-width: My understanding is that this will adapt to smaller screens with the width not changing (eg always be 50% of the screen, regardless of size)?

Box-Sizing - will not exceed the maximum height /width with padding etc.

Percentage -will also adapt to the screen size.

This is just my understanding, please tell me if im wrong.

Now my question with all this is, are all of these necessary? would I be able to just use box-sizing for my layout with pictures etc, and this would also adapt to mobile screens, instead of using max-with for certain selections?

Would appreciate it if someone could explain why they are all necessary? At the moment I believe just using box sizing, would solve all problems

Thanks Lee

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Box Sizing primarily determines how much of the box model is used and therefore how much space an element takes on the screen.

In the Box Model, Padding, Content, Border and Margin all count towards how much space an element takes on the screen.

Percentages in CSS are what;s called a Relative Unit. They will be design react to the size of its parent container. If there's no parent, then the body element acts as the parent.

max-width is very flexible as it will shrink to size no matter which unit you use, but it is highly recommend you use relative units for responsive web design.

Lee Cockcroft
Lee Cockcroft
5,147 Points
Lee Cockcroft
Lee Cockcroft
5,147 Points

Thank you for your response,

So in regards to adapting to mobile etc, is best to go down the route of bootstrap etc?

The problem is, I learnt CSS a few years back but only for desktop, so ive always used px, then assumed bootstrap would solve all issues with mobile access.

So box-sizing, and max width is actually quite new to me!

Im trying to play around with box-sizing, but looking at the code below, please could you explain why the padding makes the box bigger? I was under the impression that padding wouldn't affect the height/width, when using box-sizing?

Also how would you recommend doing your <header> <section> <footer> selectors in regards to units, max-width, box-sizing etc?

<header> <h2> Full Name</h2> <h3> Profile </h3>

</header>

CSS

header {

width:100% height:25%; background-color:blue; border:1px solid black; padding:50%;

}

Thanks for your help