Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Responsive Layout

Jen Haga
Jen Haga
6,416 Points

Difficulty with Responsive Columns

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%;
  }

}

2 Answers

Taylor Espejo
Taylor Espejo
3,939 Points

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

Jen Haga
Jen Haga
6,416 Points

Thank you Taylor. I got help outside of Treehouse.