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
Darren Knight
4,393 PointsResponsiveness
I am having trouble with the responsiveness of this code. I am trying to maintain the boxes where they are located, but once the viewport drops below 940px wide the design breaks down. If I remove the 'margin-left' from the grid classes everything works great, but that won't work for the design.
2 Answers
Flor Antara
12,372 PointsHello Darren!
Here's a little piece of code that will save you headaches of this kind:
```element { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
It basically prevents elements to grow out when padding or border is added. Padding grows towards the center, not out.
In your example, I believe that either the border or the padding is adding up space that make it break.
Hope it helps
PS: I always have this at the beginning of the CSS, in a reset, or somewhere, added to * (all) or similar.
Flor Antara
12,372 PointsHey! Glad you fixed it!
Darren Knight
4,393 PointsDarren Knight
4,393 PointsI figured out the issue. The border I added to show me where the divs are was messing things up. Removed the borders and just applied a background and it is working great now.