Difficulty with Responsive Columns

Question

I'm working on Project 2 in Front End Web Development. We have to code a mobile first (320px: iphone 5) responsive layout with breakpoints at 768px (ipad) and 1024px (laptop). The mobile version is supposed to have one column and does, the laptop version is supposed to have three columns and does. But the ipad version, which is supposed to have two columns, doesn't. I can see that it has three columns but one of the columns is underneath the other two. All was going pretty well until I added the html and media queries for the laptop version adding the third column. I don't know how to make the ipad version have 2 columns. Here is my code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Treehouse Project 2</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i,700,700i" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css"      />
  </head>
  <header id="top">
    <h1 id="header-link">Jen H</h1>
    <nav id="main-nav">
      <ul>
        <li >
          <a href="#header-link">HOME</a>
        <li>
          <a href="#portfolio-link">PORTFOLIO</a>
        <li>
          <a href="#skills-link">SKILLS</a>
        </li>  
        <li>
          <a href="#contact-link">CONTACT</a> 
      </ul>
    </nav>
  </header>
  <body>
    <div id="profileimg-wrap">
      <img src="img/besthairever2.jpg" alt="Photograph of Jen H" class="profile-photo">
    </div>
    <div id="home-wrap">
      <p style="font-size:113%;"> Hi! I'm a front end developer who loves responsive design and css. I recently finished a degree in front-end web development at Treehouse and am excited to put all my skills to use!
      </p>
    </div>
    <div id="portfolio-wrap">
    <h4 id="portfolio-link">PORTFOLIO</h4>
    <ul>
      <div class="primary col">
      <li class="img-cap-wrap">
        <img src="img/portfolio-1.png" alt="Front Page Marketing Website" class="portfolio-images">
        <h5>Marketing page</h5>
        <p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p> 
      </li>
      <li class="img-cap-wrap">
        <img src="img/portfolio-2.png" alt="Search Page" class="portfolio-images">
        <h5>Search Page</h5>
        <p>This project searches through a specific database to find information that the user is trying to look up.</p>
      </li>
      </div><!--primary column-->
      <div class="secondary col"> 
      <li class="img-cap-wrap">
        <img src="img/portfolio-3.png" alt="Travel App" class="portfolio-images">
        <h5>Travel App</h5>
        <p>This project compares travel times based on different transportation methods and tells you the best one.</p>
      </li>
      <li class="img-cap-wrap">
        <img src="img/portfolio-4.png" alt="Map of Favorite Spots" class="portfolio-images">
        <h5>Map of Favorite Spots</h5>
        <p> This project uses mapping apps to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p>
      </li>
        </div><!--secondary column-->
        <div class="tertiary col">
      <li class="img-cap-wrap">
        <img src="img/portfolio-5.png" alt="Photo Gallery" class="portfolio-images">
        <h5>Photo Gallery</h5>
        <p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos.</p>
      </li>
      <li class="img-cap-wrap">
        <img src="img/portfolio-6.png" alt="Calculator" class="portfolio-images">
        <h5>Calculator</h5>
        <p>Someone can enter the numbers they want and press the big blue button and get the result.</p>
      </li>
    </div><!--tertiary column-->
     </ul> 
      </div><!--portfolio wrap-->
   <div id="skills-wrap">
     <h4 id="skills-link">SKILLS</h4>
      <ul>
        <div class="s-primary col">
        <li>Skill 1</li>
        <li>Skill 2</li>
        <li>Skill 3</li>
        </div><!--primary column-->
        <div class="s-secondary col">
        <li>Skill 4</li>
        <li>Skill 5</li>
        <li>Skill 6</li>
       </div><!--secondary column-->
     </ul>
     </div><!--skills wrap-->
   <div id="contact-wrap">
    <h4 id="contact-link">CONTACT</h4>
     <p id="contact-sentence" class="contact-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>
     <br>
      <p class="contact-p">Phone: 925-555-5555</p>
      <p class="contact-p">Email: jenh@somewhere.com</p>
   </div><!--contact wrap-->
    <nav id="back-nav">
      <a href="#header-link">Back to Top</a>
    </nav>
  </body>
  </html>
    ```

```css

* {
  box-sizing: border-box;
}

body {
  font-family: "Josefin", sans-serif;
  background-color: #f3e5d8;
  color: #734d26;
}

h1, h4 {
  text-align: center;
}

#main-nav {
  text-align: center;
}

nav ul {
  list-style: none;
}

nav li {
  /*text-align: center;*/
  background-color: #734d26;
  margin-top: .4em;
  margin-right: 1em;
  margin-left: -1.5em;
  padding-top: .2em;
  padding-bottom: .2em;  
}

nav a {
  color: white;
  text-decoration: none;
}

#profileimg-wrap {
  text-align: center;
  background-color: #dfbf9f;
  margin-right: 1em;
  margin-left: 1em;
  padding-right:1em;
  padding-left: 1em;
  border: 4px solid #734d26;
  background-image: linear-gradient(#dfbf9f, #734d26);
}

.profile-photo {
  max-width: 100%;
  text-align: center;    
  height: 9.5em;
  width: 10em;
  border: 3px solid #804000;
  border-radius: 100%;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 15px;
}

#home-wrap {
  margin-bottom: 4em;
}

p {
  text-align: left;
  margin-left: 1em;
  margin-right: 1em;
}

#portfolio-wrap {
  background-color: #ffcccc;
  padding-top: 5px;
  border: 3px solid #ff8080;
}

#portfolio-wrap ul {
  list-style: none;
  display: block;
  text-align: center;
  padding-right: 1em;
  padding-left: 1em;
}

.portfolio-images {
  max-width: 100%;
}

#skills-wrap {
  margin-top: 4em;
  background-color: #cceeff;
  border: 3px solid  #4dc3ff;
  padding: .3em .3em .2em;
}

#contact-wrap {
margin-top: 4em;
}

#back-nav {
  text-align: center;
  background-color: #734d26;
}

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

  nav li {
  display: inline-block; 
  padding: .5em 1em .5em;
  margin-right: 1em;  
  text-align: center ; 
}

  #profileimg-wrap {
   width: 40%; 
   display: inline-block; 
   margin: 2em 2em;
   padding-left: 
}

  #home-wrap {
  display: inline-block; 
  width: 50%;  
  vertical-align:top;
  margin-top: 1em;
  margin-right: 0;  
  padding-right:1em;  
  }

  .col {
  display:inline-block;  
  padding: .5em;
  width: 49%;  
  }

  p {
  margin-left: 0;
  margin-right: 0;
  }

  .contact-p {  
    text-align: center;
    margin-left: 22.5%;
    margin-right: 22.5%;
  }

#back-nav {
  margin-top: 4em;
  }
}


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

/*.img-cap-wrap li { 
  display: inline-block;
  }*/

  .primary,
  .secondary,
  .tertiary {  
  width: 33%;
  }

.contact-p {
  margin: 0 27%;
  }

}

Answer 1 · 2017-01-23T23:01:59Z

January 23, 2017 11:01pm

Great ! [RESOLVED]

Answer 2 · 2017-01-23T02:47:41Z

January 23, 2017 2:47am

Hi Jen would you like me to look into this for you ?

Welcome to the Treehouse Community

Looking to learn something new?

Jen Haga

Jen Haga

Difficulty with Responsive Columns

2 Answers

Taylor Espejo

Taylor Espejo

Taylor Espejo

Taylor Espejo

Jen Haga

Jen Haga