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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Oguzhan KARAOGLU
Oguzhan KARAOGLU
742 Points
Posted by Oguzhan KARAOGLU
Oguzhan KARAOGLU
742 Points

The problem which occours in 8:15, happens in mobile (two column) design too.

The problem which occours in 8:15, happens in mobile (two column) design too. I tried to fix it by usin "nth-child" pseudo class. But when I extend the page to switch to three column design, some other floating problems occours. Here are my .html and .css codes:

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Oguzhan KARAOGLU | Endustrial Engineer</title>
    <link rel="stylesheet" href="normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,800,700,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>OGUZHAN KARAOGLU</h1>
        <h2>Engineer</h2>
      </a>
      <nav>
        <ul>  
          <li><a href="index.html" class="selected">HOME</a></li>
          <li><a href="about.html">ABOUT</a></li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
      </nav>
    </header>  
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="image1.jpg" target="_blank">
              <img src="image1.jpg" alt="image1">
              <p>Click to view image1 Click to view image1 Click...</p>
            </a>
          </li>
          <li>
            <a href="image2.jpg" target="_blank">
              <img src="image2.jpg" alt="image2">
              <p>Click to view image2</p>
            </a>
          </li>
          <li>
            <a href="image3.jpg" target="_blank">
              <img src="image3.jpg" alt="image3">
              <p>Click to view image3</p>
            </a>
          </li>
          <li>
            <a href="image4.jpg" target="_blank">
              <img src="image4.jpg" alt="image4">
              <p>Click to view image4</p>
            </a>
          </li>
          <li>
            <a href="image5.jpg" target="_blank">
              <img src="image5.jpg" alt="image5">
              <p>Click to view image5</p>
            </a>
          </li>
        </ul>
      </section>
    </div>
    <div id="footer">
      <footer>
        <a href="https://www.facebook.com/not-real" target="_blank">
          <img src="facebook-wrap.png" alt="Facebook Logo" class="social-icon">
        </a>
        <a href="https://www.twitter.com/not-real" target="_blank">
          <img src="twitter-wrap.png" alt="Twitter Logo" class="social-icon">
        </a>
        <p>&copy; All rights reserved.</p>
      </footer>
    </div>  
  </body>
</html>

main.css:

/*************************************
GENERAL
*************************************/

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  border-top-left-radius: 15%;
  border-top-right-radius: 15%;
}

p{
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

h3 {
  margin: 0 0 1em 0;
  font-family: 'Changa One', sans-serif;
  font-weight: normal;
  color: #e7ba4f;
}



/*************************************
HEADER
*************************************/

h1, h2 {
  color: #fff;
  text-align: center;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 0 0 10px;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-family: 'Open Sans', sans-serif;
  margin: -5px 0 0;
  font-weight: normal;
}
header {
  background: #0087d4; /* #429459: green alternative. */
  float: left;
  border-color: #73ee96;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}



/*************************************
Navigation
*************************************/

nav {
  text-align: center;
  font-size: 1em;
  background-color: #007bc2;
}

nav a {
  font-family: 'Changa One', sans-serif;
  font-weight: 800;
  padding: 15px 10px;
}

nav a, nav a:visited{
  color: white;
}

nav a.selected, nav a:hover {
  color: #e7ba4f;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}
nav li {
  display: inline-block;
}



/*************************************
SECTION
*************************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background: #f5f5f5;
  border-radius: 15%;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
  text-align: center;
}

#gallery a p:hover {
  color: #0066a0;
}



/*************************************
FOOTER
*************************************/

.social-icon {
  width: 20px;
  height: 20px;
  margin: 10px 5px 0;
}

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  color: #5d5d5d;
  padding-top:50px;
  /*background: #e9e9e9;*/
}



/*************************************
ABOUT PAGE
*************************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}



/*************************************
CONTACT PAGE
*************************************/

.contact-info {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9em;
  /*background-color: cyan;*/
}

section a, section a:visited {
  color: black;
}

section a:hover {
  color: #0066a0;
}

.contact-info a {
  display:block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin:0 0 10px;
}

.contact-info li.phone a {
  background-image: url('phone.png')
}

.contact-info li.mail a {
  background-image: url('mail.png')
}

.contact-info li.twitter a {
  background-image: url('twitter.png')
}

responsive.css:

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

  /*************************************
  TWO COLUMN LAYOUT
  *************************************/

  #primary {
    width: 50%;
    float: left;
    margin: 0 2.5%;
    /*background: cyan;*/
  }

  #secondary {
    width: 40%;
    /*float: right;*/
    float: left;
    margin: 0 2.5%;
    /*background: purple;*/
  }


  /*************************************
  HOME PAGE
  *************************************/

  #gallery li {
    width: 28.3333%; 
  }

  #gallery li:nth-child(4n) {
    clear: left;
  }

}
Mark Truitt
Mark Truitt
17,230 Points

Can you link this in a workspace or wrap the code with tags?

Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

Hey there! I fixed the markdown around your code so that it would display properly. It needs three back-ticks, ```, before and after the code snippet. It looked like you had apostrophes, ''', instead. Checkout the Markdown Cheatsheet if you ever need help formatting your posts. :)

Kevin de Vries
Kevin de Vries
4,256 Points

Try using box-sizing and set the value to border-box.

This way you only have to calculate with the margin because the paddings are inside de border-box.

maybe you should look it up before using the syntax.

https://developer.mozilla.org/nl/docs/Web/CSS/box-sizing