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

Liam Maclachlan
Liam Maclachlan
22,805 Points
Posted by Liam Maclachlan
Liam Maclachlan
22,805 Points

Why would you need to set max-width to none? (RE: Zurb Foundation CSS)

I'm trying to think of a scenario where having the max-width would need a declaration of 'none'.

My questions is brought up as the Zurb foundation has a max-width set to its '.row' class. When a row is nested within a row ('.row .row' on line 143ish), it sets the value of the child '.row' max-width to 'none'

Any idea why they have done this? especially seeing it is the class '.row' and that, quite desciptively, points to the container being an entire row.

2 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I think in that case it is so that the second, nested rule overrides the first. It's kind of 'resetting' the first .row rule.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

But calling it '.row' kind of means it is going to fill an entire width... It's especially odd when it isn't a direct child selector, too. I mean, if you want a restricted width, you use a grid

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Well it's a descendant selector so any nested row (you can theoretically nest them to infinity) will just fill the width of the container by default.

Only the outermost .row needs to have a max-width that is defined by the maximum width of the grid system (defaults to equivalent of 1000px), since it may not have a container element around it.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

I can see that, but I still don't understand why leaving it at 100% doesn't make sense. All it will do is stop the container overflowing, if it trys to expand past it. Seems a weird rule to include, personally 0_o

Edit: I do see your point now. But the max width is set to 100% on the parent, in the zero foundation. It's safe to assume that It is there if you want to change it.

Thanks man. Cleared that up :)

luke hammer
luke hammer
25,513 Points
luke hammer
luke hammer
25,513 Points

I could see using this a a quick way to hide a row. Then maybe the intent is to show/hide the row in the future by adding or removing row class using java script.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey man. But that wouldn't matter with max-width; that would be the 'dispaly:none' property. I personally think this will cause more problems, than anything else.