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

Matt Nickolls
Matt Nickolls
4,753 Points

Stumped with the final flexbox challenge

Hi all

Any ideas where I'm going wrong with the column rule to set the flex-basis/flex-grow rule.

thanks

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

.row {
  display: flex;
}

.secondary column,
.primary column,
.tertiary column { 

  flex-grow: 1;
  flex-basis: 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>

1 Answer

Shaun Kelly
Shaun Kelly
33,486 Points

Hi Matt,

You are correct with your answer and would have worked in the real world. The challenge is expecting you to target just the column property like so:

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

Hope this helps, Shaun