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
james white
78,399 PointsCSS Flexbox Final Challenge [RESOLVED]
Challenge (1 of 2):
Set the columns to expand and display on one line when they are 300px or wider. But when the columns are narrower than 300px, the browser will redistribute the space and display them on multiple lines.
..after starting out with:
/* Complete the challenge by writing CSS below */
.row {
display: flex;
}
.column {
display: flex;
}
I got:
Bummer! Use the property that determines how much of the available space the columns should take up.
.
Don't know which property they are talking about...?
Is this challenge wanting us to use '@media' to create a 300px specific media query?
6 Answers
james white
78,399 PointsThanks guys, but I actually found this Treehouse forum thread a bit more useful:
So with THAT help I came up with:
.row {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 1 300px;
}
Ionut Dobrin
6,718 Points.column{ display: flex; flex-grow:1; flex-basis:300px; }
Jason Anders
Treehouse Moderator 145,858 PointsHey James,
The challenge doesn't want a media query. Instead, it is asking for the --- and --- values, but to be set in short hand.
So, you are looking for a --- (so they are equal) and a ---.
If you look at the HTML, you will see that you need to target the .column class.
---
:)
pennicott
Front End Web Development Techdegree Student 3,521 PointsCan someone please explain the use of the "---" ?
Jason Anders
Treehouse Moderator 145,858 PointsHey matthewpennicott
There is a glitch in this particular question. The support team and Devs are still looking into it, so the "---" actually used to be code that was provided ... and then disappeared?? The answer was put back in and ... disappeared.
Sorry if it caused you any confusion. Keep Coding! :)
Ivan Kusakovic
12,197 PointsThat's something what Treehouse does. There is no use. We type code and then Treehouse converts it for some reason into dashes.
Richard Targett
4,960 PointsIonut Dobrin, that actually worked but not sure why. Why doesn't it require us to use media queries?
Thanks btw :)
Jason Anders
Treehouse Moderator 145,858 PointsJason Anders
Treehouse Moderator 145,858 PointsHey James, I'm glad you found the other post. There is a glitch with this thread that the Devs are trying to figure out and is actually confusing. I did originally provide the answer here, but all the key words and code was 'replaced' with 3 dashes.
Ivan first brought this to my attention, and then he added the answer, but the next day, his answer was also replaced with 3 dashes.
I added a Comment and another Answer explaining all this to anyone who came upon this thread, but both have since disappeared. (???).
Hopefully the one you posted here (and the link) will 'stick around.'
:)