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 trialKyle Laresn
6,506 PointsHelp with the 769px break point
I cannot get this column to break and go to a two column layout with one column below it. I followed what the video said exactly and it is not working. Tell me what I am missing @media (min-width: 769px) {
.main-header,
.main-nav,
.row
{ display: flex; }
.main-header {
flex-direction: column;
align-items: center;
}
.col{
flex: 1 50%;
} .row{ flex-wrap: wrap; } }
1 Answer
Yvette Pascacsio
5,522 PointsFlex-shrink doesn't take percentages, it works the same way as flex-grow, just opposite. Flex-basis uses percentages, and other units that are commonly used to define width. So, when you have a declaration "flex: 1 50%;" , the 50%, is defining the flex-basis, while the shrink is not being defined at all, accept by default.
Tyler Dix
14,230 PointsTyler Dix
14,230 PointsI'm struggling the with flex shorthand as well. I really wish we'd be taught the "longhand" version so that we understand what the shorthand version is doing.
The flex property accepts three values. The first value is the flex-grow, the second value is the flex-shrink, and the third value is the flex-basis. The default values are 0, 1, auto.
In your code, you're passing "50%" in to the second value, flex-shrink.
Try typing this out longhand and see if it works:
shorthand version: