Set the columns to expand and display on one line when they are 300px or wider. But when the columns are narrower than 3

Question

Some one can help me with this challenge?

Set the columns to expand and display on one line when they are 300px or wider. But when the columns are narrower than 300px, the browser will redistribute the space and display them on multiple lines.

code bellow

style.css

/* Complete the challenge by writing CSS below */

.row {
  display: flex;
}

.columns {
  justify-content: space-between;
}

@media ( min-width: 300px) {
  .columns {
    flex-direction: column;
    flex: 1;
  }
}

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>

Answer 1 · 2016-03-13T19:47:28Z

March 13, 2016 7:47pm

I don't think you want to change the flex-direction. You also won't need a media query since the flex properties can handle this. But for the width aspect of the challenge, you'll need to establish a flex-basis of 300px.

Since you already use the flex shortcut, you can add this value to it and it will set both properties at once.

Welcome to the Treehouse Community

Looking to learn something new?

Flat out

Flat out

Set the columns to expand and display on one line when they are 300px or wider. But when the columns are narrower than 3

1 Answer

Steven Parker

Steven Parker