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
Yuqi Feng
4,686 PointsWhy is the container max-width 46rem? Why 46? What is the route em here? Why should it be rem rather than em here?
With large screens, why is the container max-width 46rem? Is 46 calculated? How? Rems are relative to the route em, set to the html. So what is the route em here? Why should it be rem rather than em here? I feel I am missing something here... Any response would be much appreciated. Thanks!
1 Answer
Austin Whipple
29,725 PointsThe root em (the HTML element) font size defaults to 16px unless otherwise defined in your CSS files or the client's browser settings. So that would be 736px (16 * 46). That dimension was probably chosen as the max width for very large screens because it would maintain a reasonable column width for readability (very wide columns of text can be very hard to read efficiently).
As to why it would be rem rather than em, it usually depends on the use case. If you use rem, it is locked to the root element's font size. When you choose em, it can be influenced by the font size settings of any container elements. So, for instance, if you decided to adjust the font size of the <body> element to 12px, then you've also suddenly changed the width of your main text column. In some cases this can be a good thing, but is often bad when dealing with important, meant-to-be-stable layout elements.
Yuqi Feng
4,686 PointsYuqi Feng
4,686 PointsThanks a lot for your detailed answer! I still wonder why the number is 46 rather than 45, or 47 or any other number though...is it just an approximation? Could you explain a bit more about it? Much appreciated!
Austin Whipple
29,725 PointsAustin Whipple
29,725 PointsThey were probably shooting for a column width of around 740px wide to meet whatever designs they were working with. This could have been to maintain the correct column width for readability or was just a random choice for this particular example. 46em at 16px default font size means that they'd get a column width of 736px, which is pretty close without needing to go into crazy decimals to have pixel-perfect dimensions.
As for why 740px was chosen, or what width you should choose, it really depends on the demands of the content. Text shouldn't exceed ~100 characters per line, so you should adjust element widths accordingly. If you want a sidebar in addition to the text column, you'd want a wider container to wrap them both in.