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 CSS - Beyond the Basics Understanding Flexbox and Multi-Column Layout Flexbox: flex-grow, order, align-self

Ira Jerry
Ira Jerry
3,292 Points
Posted by Ira Jerry
Ira Jerry
3,292 Points

I've followed along with this flexbox code in work space and for some reason it doesn't adjust in my browser at all

.nav, .main {
  display: -webkit-flex;

.nav {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: space-between;
    -webkit-flex-wrap: wrap;
}

  .nav li {
    -webkit-flex-grow: 1;
  }
  .col {
    -webkit-flex: 1;

  }

  .col-c { 
    -webkit-flex: 2;
    -webkit-order: -1;
  }

  .col-b { 
    -webkit-align-self: stretch;
  }

  @media and screen (max-width: 999px) {
    .main {
      -webkit-flex-direction:column;
    }
  }

3 Answers

Christopher Aporta
Christopher Aporta
24,258 Points

Hey Ira!

I think i spotted the bug in your code. Just a simple syntax error. You wrote the following...

  @media and screen (max-width: 999px) {
    .main {
      -webkit-flex-direction:column;
    }
  }

but it should read like so...

  @media screen and (max-width: 999px) {  
    .main {
      -webkit-flex-direction:column;
    }
  }

/* you just switched 'screen' & 'and' around by accident */

As far as I can tell, that should remedy the issue.

Best,
Chris

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

This will only display correctly if you are using a webkit based browser like Safari or Chrome.

Does it work if you use it unprefixed, removing the -webkit-?

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

rydavim Yep, the code challenge will also accept the un-prefixed property.

Ira Jerry
Ira Jerry
3,292 Points
Ira Jerry
Ira Jerry
3,292 Points

thanks guys for the help.