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

Pascal Houben
Pascal Houben
7,566 Points
Posted by Pascal Houben
Pascal Houben
7,566 Points

Issue with Flexbox Code Challenge

Hey guys,

I am trying to solve the final code challenge of this course. As there is no way to directly post my question underneath the code challenge (maybe something for Team Treehouse to consider for future development), I am sharing the following code snippet with you from the first task:

.secondary column, .primary column, .tertiary column { flex-grow: 1; flex-basis: 300px; }

Somehow, I can't figure out what is missing in the above code? The only hint I get is: "Did you set the initial size to 300px with flex-basis?" But I did so ...

Thanks for your kind help in advance!

Cheers,

Pascal

3 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

To associate a question with a challenge, use the "Get Help" button in the challenge to create it. It copies in your code and provides a link to the challenge.

Without seeing the challenge conditions, I'm guessing a bit here. But I'd bet at least part of the issue relates to the word "column" in the CSS selectors. It appears to be an element selector, but I don't think "column" is an HTML element type. Should it perhaps be a class name instead (with a leading period)?

If that's not it, please post a link to the challenge page.

Update: You're quite right, a class name is always one word. Those elements have two class names. So to use both, you would put a period between them instead of a space. But the fact that they share a class makes it easy to target them all with just one class selector:

.column {
  flex-grow: 1;
  flex-basis: 300px;
}
Pascal Houben
Pascal Houben
7,566 Points
Pascal Houben
Pascal Houben
7,566 Points

Thanks for your response. This is the link to the code challenge: https://teamtreehouse.com/library/css-flexbox-layout/building-a-layout-with-flexbox/flexbox-columns-challenge

It seems to be a class but then again, I thought that a class may only consist of one word, e.g. '.primary-column' and not '.primary column' ...

Pascal Houben
Pascal Houben
7,566 Points
Pascal Houben
Pascal Houben
7,566 Points

Thanks a lot for the help Steven ... much appreciated ...