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 Robert Engelbert
Robert Engelbert
7,229 Points

css flex box

I'm trying to build a responsive site that has breakpoints for 320px, 768px and 1024px using flex box. I'm running into problems when I set up my html the divs get confused and don't use the right closing tag. here's my code

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Responsive Layout</title> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="main.css"> <link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet">

 ```<body>```
    <div class="wrapper">
    <header class="main-header">
     <div class="container cf">
        <ul class="nav">
          <li class="name"><h1><a href="top">Student Name</a></h1></li>
          <li><a href="#">HOME</a></li>
          <li><a href="#">PORTFOLIO</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
        </div>
        </header>

        <div class="banner">
     <div class="flex-item">0</div>
    <p id="profile">This website doesn't work I think it's because of all the divs?</p>
    </div>

     <h2>PORTFOLIO</h2>
     <div class="hope">
      <div class="flex-container">
     <div class="flex-item">1</div>
      <h3>Marketing Page</h3>
      <p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p> 


    <div class="flex-item">2</div>
    <h3>Search Page</h3>
    <p>This project searches through a specific database to find information that the user is trying to look up.</p>
    </div>


    <div class="please-work">
    <div class="flex-item">3</div>
    <h3>Travel App</h3>
    <p>This project compares travel times based on different transportation methods and tells you the best one.</p>
    </div>
    </div>

    <div class="help">
    <div class="flex-item">4</div>
    <h3>Map of Favorite Spots</h3>
    <p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour</p>



    <div class="dreamer">
    <div class="flex-item">5</div>
    <h3>Photo Gallery</h3>
    <p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos</p>


    <div class="flex-item">6</div>
    <h3>Calculator</h3>
    <p>Someone can enter in the numbers they want, and press the big blue button and get the result</p>
    </div>
    </div>




    <div class="hello">
    <h3>CONTACT</h3>
    <p>If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>
    <a href="tel:+1-111-555-1234">Phone +(111)-555-1234</a>
    <a href="email@yoursite.com">Email email@yoursite.com</a>
    </div>
  <footer>
    <div class="main-footer">
    <a href="#top">Back to top</a>
          <h2 class="stu-name">Student Name</h2>

    </div>
  </footer>
  </div>
  </body>
``` </html>```

css

.flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; }```

```@media only screen and (min-width: 768px) {

.flex-container { display: -webkit-flex; display: flex; width: 50%; height: 250px; padding: 10px; background-color: lightgrey; }

.please-work { display: -webkit-flex; display: flex; width: 50%; height: 250px; padding: 10px; background-color: lightgrey; }

.dreamer { display: -webkit-flex; display: flex; width: 50%; height: 250px; padding: 10px; background-color: lightgrey; } }```

```@media only screen and (min-width: 1024px) {

.hope{ display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; width: 33%; height: 250px; padding: 10px; }

.help{ display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; width: 33%; height: 250px; padding: 10px; } } ```

1 Answer

Karolin Rafalski
Karolin Rafalski
11,368 Points

You need to format your html so that the indentation matches the nesting of your elements: Opening and closing tags must have the same indentation. Nested elements (children) should be further indented. Siblings should have the same indentation. That will clarify which closing tags close which elements. (see below) Flexbox works by having one parent element and then the children of that element (which should all be siblings) will format to flex box. Here is a great explanation: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Hope this helps!

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Responsive Layout</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet">
  </head>
  <body>
    <div class="wrapper">
      <header class="main-header">
        <div class="container cf">
          <ul class="nav">
            <li class="name"><h1><a href="top">Student Name</a></h1></li>
            <li><a href="#">HOME</a></li>
            <li><a href="#">PORTFOLIO</a></li>
            <li><a href="#">CONTACT</a></li>
          </ul>
        </div>
      </header>
      <div class="banner">
        <div class="flex-item">0</div>
        <p id="profile">This website doesn't work I think it's because of all the divs?</p>
      </div>
      <h2>PORTFOLIO</h2>
      <div class="hope">
        <div class="flex-container">
          <div class="flex-item">1</div>
          <h3>Marketing Page</h3>
          <p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
          <div class="flex-item">2</div>
          <h3>Search Page</h3>
          <p>This project searches through a specific database to find information that the user is trying to look up.</p>
        </div>
        <div class="please-work">
          <div class="flex-item">3</div>
          <h3>Travel App</h3>
          <p>This project compares travel times based on different transportation methods and tells you the best one.</p>
        </div>
      </div>
      <div class="help">
        <div class="flex-item">4</div>
        <h3>Map of Favorite Spots</h3>
        <p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour</p>
        <div class="dreamer">
          <div class="flex-item">5</div>
          <h3>Photo Gallery</h3>
          <p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos</p>
          <div class="flex-item">6</div>
          <h3>Calculator</h3>
          <p>Someone can enter in the numbers they want, and press the big blue button and get the result</p>
      </div>
    </div>
    <div class="hello">
      <h3>CONTACT</h3>
      <p>If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>
      <a href="tel:+1-111-555-1234">Phone +(111)-555-1234</a>
      <a href="email@yoursite.com">Email email@yoursite.com</a>
    </div>
    <footer>
      <div class="main-footer">
        <a href="#top">Back to top</a>
        <h2 class="stu-name">Student Name</h2>
      </div>
    </footer>
  </div>
  </body>
</html>