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

Kim Dallas
Kim Dallas
11,461 Points

i've tried everything

i've tried flex basis. it should work

style.css
/* Complete the challenge by writing CSS below */

.row {
  display: flex;
}
.column {
  display:flex 300px;
}
index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Flexbox Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="row">   
      <div class="secondary column">
        <h2>Welcome!</h2>
        <p>Everything in this city is worth waiting in line for. Cupcake ipsum dolor sit.</p>
        <p>Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum.</p>
      </div>

      <div class="primary column">
        <h2>How to get here</h2>
        <p><strong>Plane: </strong>Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake.</p>
        <p><strong>Train: </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin.</p>
        <p><strong>Car: </strong>Jelly cotton candy bonbon jelly-o jelly-o I love. I love sugar plum chocolate cake pie I love pastry liquorice.</p>
      </div>

      <div class="tertiary column">
        <h2>Great food</h2>
        <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread.</p>
        <p>Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum.</p>
      </div>
    </div>
  </body>
</html>
Nick East
Nick East
7,422 Points
.column {
       display: flex;
       flex-grow: 1; 
       flex-basis: 300px; 
}

1 Answer

Alexander Besse
Alexander Besse
Front End Web Development Techdegree Graduate 23,582 Points

Hi, Kim Dallas!

It looks like you're defining display: flex; and flex-basis: 300px; through the same declaration, which unfortunately isn't a recognized CSS declaration. Separating them should help!

I found the resource below to be very helpful when learning flex box, hopefully it can come in handy for you also! Resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Let me know if you have more questions, happy coding!