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

Posted by Chris Wiley
Chris Wiley
11,327 Points

What am I missing to get flexbox-direction: column; in jQuery from flexbox part2 video to work?

I have put everything I can think of exactly like Guil had it in the video. All changes have worked step for step, except this last one.

http://codepen.io/anon/pen/pGtmk

I can't remember if there was something I was supposed to do in index.html. MDN supports it without prefix (I'm using Firefox30). I have looked at it moving the screen width and thru Firebug responsive screen sizes, but the columns won't switch from row to column at any screen dimension.

2 Answers

Colby Work
Colby Work
20,422 Points

very simple fix, and pretty common error...you have a semi-colon in your media query (max-width: 999px;) delete the ; and it should run as expected =)

@media screen and (max-width: 999px){
  .main {
     flex-direction: column;
   }
}
Chris Wiley
Chris Wiley
11,327 Points
Chris Wiley
Chris Wiley
11,327 Points

Yep! that did it. Thanks for the extra set of eyes. I was sure I saw a semi-colon in Guil's video. I went back and, surprise, no semi-colon.

I was confused because I also had a failure in the mutli-column layout. And found out that Firefox doesn't support the flex-direction property.