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
Mike Kohl
Courses Plus Student 6,793 PointsWhat is the purpose of using the max-width property on a wrapper div?
Answer: if the browser is smaller than the maximum width, the element will reduce in size.
Am I missing something, I went over this a few times and the element (div) does not reduce in size when the browser is smaller than the maximum width.
For example, if i set the wrapper div to 940px, and I reduce the size of the browser the div does not reduce in size, only the browser does.
Kenya Sullivan
21,711 PointsHelps center the design on the page. Max-wIdth also helps control the width width you're elements will expand, when using fluid widths for elements.
4 Answers
Kenya Sullivan
21,711 PointsHelps center the design on the page. Max-wIdth also helps control the width width you're elements will expand, when using fluid widths for elements.
Ryan Gordon
1,340 PointsYou can inspect this page, and others, on your PC to see max-width in action. This forum is in class grid-container with max-width 1430px. Using the Elements tab in chrome (i open this using ctrl-shift-j then go to elements, just habit) I can hover over the grid container div and see that the gray space to the right is there because of the max width. This allows treehouse to add the tips on the right hand side of the forum. You can uncheck that CSS rule and see what happens. The forum will get pushed behind the stuff to the right of the text and you won't be able to read everything here.
Mike Kohl
Courses Plus Student 6,793 PointsI missed this question on the quiz 3 out of 4 tries. And I can't not see how the answer is correct.
The example above is using a fixed width for max-width ( and is not fluid ). So there is no reason for the div to reduce in size if I reduce the size of the browser it should stay at 940px wide if i expand it it should stay at 940px.
As suggested I will inspect this in google chrome when I get home later.
Ryan Gordon
1,340 PointsThere is a difference between width and max-width.
http://stackoverflow.com/questions/6456468/css-width-and-max-width
Essentially, if you set a fixed width and a max-width there are rules that determine which one the browser will use (see link). Also you have to make the browser small enough to effect the width. What browser/OS are you using? When I use chrome on linux it acts differently than chrome on windows 7.
Mike Kohl
Courses Plus Student 6,793 PointsI was taking a quiz.. and when I got done, I clicked the button "start discussion".
This is the question I had to answer on the quiz: What is the purpose of using the max-width property on a wrapper div?
The answer is: if the browser is smaller than the maximum width, the element will reduce in size.
When reading your guys responses I think your trying to answer the question as I would. Such as, setting the max-width property on a wrapper div would allow me to center the div and prevent the width from going to wide.
But that is not the answer in the quiz. The answer they specified is misleading and I was just wondering if I missed something.. because the div element never reduces in size ( in the project they never used percentages just a fixed max-width )
Kenya Sullivan
21,711 PointsKenya Sullivan
21,711 PointsHelps center the design on the page. Max-wIdth also helps control the width width you're elements will expand, when using fluid widths for elements.