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 Personal Profile Page

Posted by Holly Logan
Holly Logan
7,142 Points

How do I adjust this layout?

Hi, I have added 2 more boxes in the body of the page which has turned it into a 4 column layout. But I just want it to be 2 column - 2 boxes on top of the other 2 boxes. How do I do that?

Here's the HTML:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Holly's Profile</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> </head> <body>

<div class="main-nav">
    <ul class="nav">
      <li class="name">Holly</li>
      <li><a href="#">Home</a></li>
    </ul>
</div>

<header>
  <img src="images/me.png" alt="Photo of Holly" class="profile-image">
  <h1 class="tag name">Hello, I’m Holly</h1>
  <p class="tag location">I'm from Canada</p>
</header>

<main class="flex">
  <div class="card">
    <h2>Background</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet magna orci. Cras fermentum imperdiet diam non ullamcorper. Nunc ultrices magna non rhoncus sollicitudin. In sit amet pulvinar nisl, eget hendrerit lectus. Fusce enim dolor, maximus vitae tincidunt ac, feugiat consequat lacus. Curabitur vel nulla et sem pharetra lacinia. Integer non dapibus sem.</p>
  </div> 

  <div class="card">
    <h2>Goals</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet magna orci. Cras fermentum imperdiet diam non ullamcorper. </p>
    <ul class="skills">
      <li>Web Design</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Ruby</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet magna orci. Cras fermentum imperdiet diam non ullamcorper. </p>
  </div> 

  <div class="card">
  <h2>test</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet magna orci. Cras fermentum imperdiet diam non ullamcorper. Nunc ultrices magna non rhoncus sollicitudin. In sit amet pulvinar nisl, eget hendrerit lectus. Fusce enim dolor, maximus vitae tincidunt ac, feugiat consequat lacus. Curabitur vel nulla et sem pharetra lacinia. Integer non dapibus sem.</p>
  </div>

  <div class="card">
    <h2>test</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet magna orci. Cras fermentum imperdiet diam non ullamcorper. Nunc ultrices magna non rhoncus sollicitudin. In sit amet pulvinar nisl, eget hendrerit lectus. Fusce enim dolor, maximus vitae tincidunt ac, feugiat consequat lacus. Curabitur vel nulla et sem pharetra lacinia. Integer non dapibus sem.</p>
 </div>

</main>
<footer>
  <ul>
    <li><a href="https://github.com/hollylogan" class="social github">Github</a></li>
  </ul>
  <p class="copyright">Copyright 2016, Holly</p>
</footer>

</body> </html>

Here's the CSS:

/* Global Layout Set-up */

  • { box-sizing: border-box; }

body { margin: 0; padding: 0; text-align: center; font-family: 'Raleway', sans-serif; color: #222; background: #f7f5f0; } /* Link Styles */

a { text-decoration: none; color: white; } a:hover { color: #6633ff; }

/* Section Styles */

.main-nav { width: 100%; background: red; min-height: 30px; padding: 10px; position: fixed; text-align: center; } .nav { display: flex; justify-content: space-around; font-weight: 700; list-style-type: none; margin: 0 auto; padding: 0; }

.nav .name { display: block; margin-right: auto; color: black; } .nav li { padding: 5px 10px 10px 10px; } .nav a { transition: all .5s; } .nav a:hover { color: grey }

header { text-align: center; background: url('images/new-zealand.png') no-repeat top center ; background-size: cover; overflow: hidden; padding-top: 60px; } header { line-height: 1.5; } header .profile-image { margin-top: 50px; width: 150px; height: 150px; border-radius: 50%; border: 1.5px solid #efefef; box-shadow: 2px 2px 1px #efefef; transition: all .5s; } header .profile-image:hover { transform: scale(1.2) rotate(5deg); } .tag { background-color: #efefef; color: black; padding: 10px; border-radius: 5px; display: table; margin: 10px auto; } .location { background-color: #222; color: white; } .card { margin: 30px; padding: 20px 40px 40px; max-width: 500px; text-align: left; background: #fff; border-bottom: 4px solid #ccc; border-radius: 6px; transition: all .5s; } .card:hover { border-color: red; }

ul.skills { padding: 0; text-align: center; }

.skills li { border-radius: 6px; display: inline-block; background: #ccc; color: white; padding: 5px 10px; margin: 2px; }

.skills li:nth-child(odd) { background: red; }

footer { width: 100%; min-height: 30px; padding: 20px 0 40px 20px; }

footer .copyright { top: -8px; font-size: .75em; }

footer ul { list-style-type: none; margin: 0; padding: 0; }

footer ul li { display: inline-block; }

a.social { display: inline-block; text-indent: -9999px; margin-left: 5px; width: 30px; height: 30px; background-size: 30px 30px; opacity: .4; transition: all .5s; } a.twitter { background-image: url(images/twitter.svg); } a.linkedin { background-image: url(images/linkedin.svg); } a.github { background-image: url(images/github.svg); } a.social:hover { opacity: 1; } .clearfix { clear: both; }

/* Styles for larger screens */ @media screen and (min-width: 720px) {

.flex { display: -ms-flexbox; /* TWEENER - IE 10 */ display: flex; max-width: 1200px; -ms-flex-pack: distribute; justify-content: space-around; margin: 0 auto; }

header { min-height: 470px; }

.nav { max-width: 1200px; padding: 0 30px; }

main { padding-top: 20px; }

main p { line-height: 1.6em; }

footer { font-size: 1.3em; max-width: 1200px; margin: 40px auto; }

}

Thanks in advance!

2 Answers

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Holly,

this will need tweaking on responsive devices a bit more, but try this:

<!doctype html> <html lang="en">
<head>
    <meta charset="utf-8"> <title>Holly's Profile</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <style media="screen">
    /* Global Layout Set-up */

* { box-sizing: border-box; }
body { margin: 0; padding: 0; text-align: center; font-family: 'Raleway', sans-serif; color: #222; background: #f7f5f0; } /* Link Styles */

a { text-decoration: none; color: white; } a:hover { color: #6633ff; }

/* Section Styles */

.main-nav { width: 100%; background: red; min-height: 30px; padding: 10px; position: fixed; text-align: center; } .nav { display: flex; justify-content: space-around; font-weight: 700; list-style-type: none; margin: 0 auto; padding: 0; }

.nav .name { display: block; margin-right: auto; color: black; } .nav li { padding: 5px 10px 10px 10px; } .nav a { transition: all .5s; } .nav a:hover { color: grey }

header { text-align: center; background: url('images/new-zealand.png') no-repeat top center ; background-size: cover; overflow: hidden; padding-top: 60px; } header { line-height: 1.5; } header .profile-image { margin-top: 50px; width: 150px; height: 150px; border-radius: 50%; border: 1.5px solid #efefef; box-shadow: 2px 2px 1px #efefef; transition: all .5s; } header .profile-image:hover { transform: scale(1.2) rotate(5deg); } .tag { background-color: #efefef; color: black; padding: 10px; border-radius: 5px; display: table; margin: 10px auto; } .location { background-color: #222; color: white; } .card { margin: 2rem auto; padding: 20px 40px 40px; max-width: 500px; text-align: left; background: #fff; border-bottom: 4px solid #ccc; border-radius: 6px; transition: all .5s; } .card:hover { border-color: red; }

ul.skills { padding: 0; text-align: center; }

.skills li { border-radius: 6px; display: inline-block; background: #ccc; color: white; padding: 5px 10px; margin: 2px; }

.skills li:nth-child(odd) { background: red; }

footer { width: 100%; min-height: 30px; padding: 20px 0 40px 20px; }

footer .copyright { top: -8px; font-size: .75em; }

footer ul { list-style-type: none; margin: 0; padding: 0; }

footer ul li { display: inline-block; }

a.social { display: inline-block; text-indent: -9999px; margin-left: 5px; width: 30px; height: 30px; background-size: 30px 30px; opacity: .4; transition: all .5s; } a.twitter { background-image: url(images/twitter.svg); } a.linkedin { background-image: url(images/linkedin.svg); } a.github { background-image: url(images/github.svg); } a.social:hover { opacity: 1; } .clearfix { clear: both; }

/* Styles for larger screens */ @media screen and (min-width: 720px) {

.flex { display: -ms-flexbox; /* TWEENER - IE 10 */ display: flex; -ms-flex-pack: distribute; justify-content: space-around; flex-wrap: wrap;}

.flex-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.card:nth-child(1), .card:nth-child(2) {
    margin-bottom: 4rem;
}

.card {
    flex: 0 0 50%;
}

header { min-height: 470px; }

.nav { max-width: 1200px; padding: 0 30px; }

main { padding-top: 20px; }

main p { line-height: 1.6em; }

footer { font-size: 1.3em; max-width: 1200px; margin: 40px auto; }

}
    </style>
</head>
<body>
<div class="main-nav">
    <ul class="nav">
      <li class="name">Holly</li>
      <li><a href="#">Home</a></li>
    </ul>
</div>

<header>
  <img src="images/me.png" alt="Photo of Holly" class="profile-image">
  <h1 class="tag name">Hello, I’m Holly</h1>
  <p class="tag location">I'm from Canada</p>
</header>

<div class="flex-wrapper">
    <main class="flex">
      <div class="card">
        <h2>Background</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet magna orci. Cras fermentum imperdiet diam non ullamcorper. Nunc ultrices magna non rhoncus sollicitudin. In sit amet pulvinar nisl, eget hendrerit lectus. Fusce enim dolor, maximus vitae tincidunt ac, feugiat consequat lacus. Curabitur vel nulla et sem pharetra lacinia. Integer non dapibus sem.</p>
      </div>

      <div class="card">
        <h2>Goals</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet magna orci. Cras fermentum imperdiet diam non ullamcorper. </p>
        <ul class="skills">
          <li>Web Design</li>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>Ruby</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet magna orci. Cras fermentum imperdiet diam non ullamcorper. </p>
      </div>

      <div class="card">
      <h2>test</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet magna orci. Cras fermentum imperdiet diam non ullamcorper. Nunc ultrices magna non rhoncus sollicitudin. In sit amet pulvinar nisl, eget hendrerit lectus. Fusce enim dolor, maximus vitae tincidunt ac, feugiat consequat lacus. Curabitur vel nulla et sem pharetra lacinia. Integer non dapibus sem.</p>
      </div>

      <div class="card">
        <h2>test</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet magna orci. Cras fermentum imperdiet diam non ullamcorper. Nunc ultrices magna non rhoncus sollicitudin. In sit amet pulvinar nisl, eget hendrerit lectus. Fusce enim dolor, maximus vitae tincidunt ac, feugiat consequat lacus. Curabitur vel nulla et sem pharetra lacinia. Integer non dapibus sem.</p>
     </div>
 </div>

</main>
<footer>
  <ul>
    <li><a href="https://github.com/hollylogan" class="social github">Github</a></li>
  </ul>
  <p class="copyright">Copyright 2016, Holly</p>
</footer>
</body> </html>
Holly Logan
Holly Logan
7,142 Points
Holly Logan
Holly Logan
7,142 Points

Thanks Joe!