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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Joanna Kelley
Joanna Kelley
551 Points

Okay so here's my html AND css, could someone take a look over it?

Still having issues with my gallery images- my third image in the gallery (in the mobile view) is still pushed to the right because of something in the left column pushing it over. I have tried every suggestion and a bunch of other things.

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

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

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

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}


/************************************
HEADING
*************************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

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

h2 {
  font-size: 0.7em;
  margin: -5px 0 0;
  font-weight: normal;

}



/************************************
NAVIGATION
*************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}


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

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;  
}

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


/************************************
PAGE: PORTFOLIO
*************************************/

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

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

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



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

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



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

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.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('../img/phone.png');
}

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

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

/************************************
COLORS
*************************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile devices */
nav {
  background: #599a68;
}


/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}



RESPONSIVE.CSS:

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

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

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }


  /************************************
  PAGE: PORTFOLIO
  *************************************/

  #gallery li {
    width: 28.3333%;
  }

  #gallery li:nth-child(3n+1) {
    clear: left;
  }



}

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

}
Joanna Kelley
Joanna Kelley
551 Points

If no one else is able to help me figure out my issue, where else can I go to figure this out?

Hello Joanna Kelley I'll take a look at your code. Can you post the HTML aswell?

Justin Horner
Justin Horner
Treehouse Guest Teacher

When using your css, I see three columns with three images at the top and two below as it should be. Do you have responsive.css in a separate file or are you using a single css file?

Joanna Kelley
Joanna Kelley
551 Points

HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Joanna Kelley | Artist</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <body> <header> <a href="index.html" id= "logo"> <h1>Joanna Kelley</h1> <h2>Artist</h2> </a> <nav> <ul> <li><a href="index.html" class:"selected">Portfolio</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="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Blah blah blah.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>More blah blah blah about Nick's pictures.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>And some more blah blah blah.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>This is the final blah!</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/joannajaelk"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/jjhorn"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>ยฉ 2015 Joanna Kelley.</p> </footer> </div> </body> </html>

Joanna Kelley
Joanna Kelley
551 Points

responsive css is in a separate file.

Joanna Kelley
Joanna Kelley
551 Points

Fullscreen- my gallery looks fine. It's only when I shrink it down to mobile size that I see that the second line floats to the right, presumably because of the first gallery item.

1 Answer

Justin Horner
STAFF
Justin Horner
Treehouse Guest Teacher

Hello Joanna,

It turns out the reason you are seeing this is because of the change in the HTML paragraph for the second list item. You have "Blah blah blah." but with longer text like the original "Playing with blending modes in Photoshop.", it will react as you would expect.

I tested the shorter text in my workspace for the course and got the same result you're seeing. One way to solve this problem for single line text in the paragraphs is to set the min-height of the p tag to say 35px like this.

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
  min-height: 35px;
}

I hope this helps.

Joanna Kelley
Joanna Kelley
551 Points

oh my god, THANK YOU THANK YOU THANK YOU! yes, it works now and I understand what went wrong. !!! :)

Justin Horner
Justin Horner
Treehouse Guest Teacher

You're welcome! That was a great find by using your own values ;)

Joanna Kelley
Joanna Kelley
551 Points

Anything I can do to break things, just leave it to me! LOL