Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Flexbox Layout Building a Layout with Flexbox Flexbox Columns Challenge

CSS 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

Thanks guys, but I actually found this Treehouse forum thread a bit more useful:

https://teamtreehouse.com/community/set-the-columns-to-expand-and-display-on-one-line-when-they-are-300px-or-wider-but-when-the-columns-are-narrower-than-3


So with THAT help I came up with:

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1 300px;
}
Jason Anders
Jason Anders
Treehouse Moderator 145,624 Points

Hey 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.'

:)

Ionut Dobrin
Ionut Dobrin
6,718 Points

.column{ display: flex; flex-grow:1; flex-basis:300px; }

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,624 Points

Hey 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.

---

:)

Can someone please explain the use of the "---" ?

Jason Anders
Jason Anders
Treehouse Moderator 145,624 Points

Hey 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
Ivan Kusakovic
12,197 Points

That's something what Treehouse does. There is no use. We type code and then Treehouse converts it for some reason into dashes.

Richard Targett
Richard Targett
4,960 Points

Ionut Dobrin, that actually worked but not sure why. Why doesn't it require us to use media queries?

Thanks btw :)