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 Responsive Web Design

Nate Grant
Nate Grant
23,695 Points
Posted by Nate Grant
Nate Grant
23,695 Points

Gallery photos not spaced right.

My gallery isn't functioning correctly. I have to images in my first row like normal. my second row however has 1 image displaying in the second row and can't display two? my third row displays correctly. Heres my code: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset ="utf-8">
        <title>Nate Grant | IOS Developer</title>
        <link rel="stylesheet" href="CSS/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One: 400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400|Open+Sans' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="CSS/main.css">

  </head>

    <body>
        <header>
        <a href="index.html" id="logo">
            <h1>Nate Grant</h1>
            <h2>IOS Developer</h2>
        </a>

        <nav>
            <ul>
                <li><a href="index.html" class="selected">Portfolio</a></li>
                <li><a href="about.html">About Me</a></li>
                <li><a href="contact.html">Contact</a></li>

            </ul>
        </nav>


        </header>
    <div id="wrapper">



      <section>
          <ul id="gallery">
        <li>
            <a href="https://itunes.apple.com/us/app/pong-8-bit/id978997066?mt=8">
              <img src="appscreen1.png" alt="">
              <p>App screenshot I made in photoshop CS6 for my new app.</p>
            </a>
            </li>
            <li>
            <a href="https://itunes.apple.com/us/app/pong-8-bit/id978997066?mt=8">
              <img src="appscreen2.png" alt="">
              <p>Another app screenshot I made in photoshop.</p>
            </a>
            </li>
            <li>
            <a href="code.png">
              <img src="code.png" alt="">
              <p>Code from an app I developed.</p>
            </a>
            </li>
            <li>
            <a href="flappy.png">
              <img src="flappy.png" alt="">
              <p>App assets I made in Sketch 3.</p>
            </a>
            </li>
            <li>
            <a href="Twitter-Header.jpg">
              <img src="Twitter-Header.jpg" alt="">
              <p>Created a Twitter header in photoshop.</p>
            </a>
            </li>
          </ul>
        </section>

        <footer>

            <a href="http://twitter.com/nathangrant97"><img src="Img/twitter-wrap.png" alt"Twitter Logo" class="social-icon";></a>
            <a href="https://www.facebook.com/nate.grant.980"><img src="Img/facebook-wrap.png" alt"Facebook Logo" class="social-icon";></a>

            <p>&copy; 2015 Nate Grant.</p>
        </footer>
   </div>
    </body>
 </html>

main.css

/************ 
General
************/

body {
font-family: 'Changa One', cursive;
}

#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', cursive;
 margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.83em;  
}

h2 {
font-family: 'Changa One', cursive;
font-size: 1.30em;
margin: -5px 0 0;
font-weight: normal;
line-height: 0.56em;
}



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

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

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

nav li {
  display:inline-block
}

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

/************ 
Footer
************/

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

}

.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.753m;
color:#bdc3c7  
}

/************ 
Page: About Me
************/

.profile-photo {
 display:block;
 max-width:150;
 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: #fff;
  border-color: #fff;
}

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

/* links */
a {
  color: #000000;
}
/* nav backround on mobile. */


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



nav a.selected, nav a:hover {
 color: #000000; 

}
Demauri Portis
Demauri Portis
4,809 Points
Demauri Portis
Demauri Portis
4,809 Points

I believe you need to use the clear property within your css (gallery li) ~Hope it helped

Nate Grant
Nate Grant
23,695 Points
Nate Grant
Nate Grant
23,695 Points

Demauri Portis clear: which property? both, none, etc.?

Demauri Portis
Demauri Portis
4,809 Points
Demauri Portis
Demauri Portis
4,809 Points

I would assume its both, but you can always test all the values and see what you get. All the values for clear is: left, right, both, none, inherit. link : http://www.w3schools.com/css/css_float.asp

Nate Grant
Nate Grant
23,695 Points
Nate Grant
Nate Grant
23,695 Points

Demauri Portis yeah when my images are in there it shows three row, but the second column only show one image on the right. the first and third rows show 2 images while the 2nd row only shows one.

Demauri Portis
Demauri Portis
4,809 Points
Demauri Portis
Demauri Portis
4,809 Points

yeah, i just compared my code to yours from that course. Ours are exactly the same but my 5 pictures go 3 in the first row and 2 in the second row... weird

maybe you could try targeting the one thats out of position using something i learned later in the course.

galler li[href^="flappy"] { float: left; }

if flappy.png isn't the one in the row by itself. where i wrote flappy change it to either "code" or "twitt"

if that fails, then I don't know lol, tried my best

Nate Grant
Nate Grant
23,695 Points
Nate Grant
Nate Grant
23,695 Points

Thanks Demauri Portis Thanks for the help I appreciate it! I'll figure it out somehow. it worked fine until I put in my own images...

3 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I doubt it will fix the issue you're having, but you have a slight typo in your css (missing e in em for the font-size value):

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

should be:

#gallery li a p {
margin:0;
padding:5%;
font-size:0.753em;
color:#bdc3c7;
}
Diamond Black
Diamond Black
5,942 Points
Diamond Black
Diamond Black
5,942 Points

I had the same issue with my code. Thanks to @lain Simmons I was able to fix it. Had the wrong number for font size. For #gallery li a p I had font-size: 0.75em; which is suppose to be font-size:0.753em;

Nate Grant
Nate Grant
23,695 Points
Nate Grant
Nate Grant
23,695 Points

@lain Simmons thanks dude! I'll try!