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

Brad Lacke
Brad Lacke
7,438 Points
Posted by Brad Lacke
Brad Lacke
7,438 Points

Portfolio has blank spot - can't figure out why

No matter what images I add or take away, there is a blank spot in my portfolio image gallery between the second and third image. Can't figure it out.

Brad Lacke
Brad Lacke
7,438 Points
Brad Lacke
Brad Lacke
7,438 Points

Here is my main.css:

html

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

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

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

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

/********************
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: 'Quattrocento Sans', sans-serif;
  margin: 15px 0;
  font-size: 2.0em;
  font-weight: bold;
  line-height: 0.8em;
}

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




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

nav {
  text-align: center;
  font-size: 1.0em;
  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: .70em;
  color: #555
}



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

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

/* grey header */
header {
  background: #777;
  border-color: #000;
}

/* nav background on mobile */
nav {
  background: #000;
}

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

/* links */
a {
  color: #888 ;
}

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

/* selected nav link color */
nav a.selected, nav a:hover {
 color: #555; 
}
Brad Lacke
Brad Lacke
7,438 Points
Brad Lacke
Brad Lacke
7,438 Points

index.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Brad Lacke | Artist</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700,700italic,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">
</head> <body> <header> <a href="index.html" id="logo"> <h1>Brad Lacke</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/Allosaurus Color 2.jpg"> <img src="img/Allosaurus Color 2.jpg" alt=""> <p>Experimentation with dinosaurs and Treehouse.</p> </a> </li> <li> <a href="img/6-7 Deer Skull.jpg"> <img src="img/6-7 Deer Skull.jpg" alt=""> <p>Black and white study.</p> </a> </li> <li> <a href="img/Coelophysis.jpg"> <img src="img/Coelophysis.jpg" alt=""> <p>Primitive Dinosaur Linework.</p> </a> </li> <li> <a href="img/Chungkingosaurus.jpg"> <img src="img/Chungkingosaurus.jpg" alt=""> <p>Unfinished Chinese dinosaur.</p> </a> </li> <li> <a href="img/Ankylosaurus C.jpg"> <img src="img/Ankylosaurus C.jpg" alt=""> <p>Fully rendered with color and focal blur.</p> </a> </li> <li> <a href="img/Tonal Triceratops fin thouse.jpeg"> <img src="img/Tonal Triceratops fin thouse.jpeg" alt=""> <p>Experimentation with dinosaurs and Treehouse.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/thedodus"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/thedodus"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Brad Lacke.</p> </footer> </div> </body>
</html>

Brad Lacke
Brad Lacke
7,438 Points
Brad Lacke
Brad Lacke
7,438 Points

this results in:

IMG IMG

blank IMG

IMG IMG

IMG blank

-trying to figure out what's up with the mid-gallery blank spot. Any help would be much appreciated.

Joe Cochran
Joe Cochran
4,430 Points

Try pasting your code into a codepen and sharing that link here. It looks like the majority of your html was stripped out. Also, check out the Markdown cheatsheet, which will help you to paste your code in the forum but keep it readable like in your code editor.

7 Answers

Neal Gist
Neal Gist
8,438 Points

Hi Brad, try applying 'clear' to every other element just to make sure it starts from a new line.

This solution worked fine: '''css

gallery li:nth-child(odd) {

clear:left; } '''

http://jsfiddle.net/deqr2c06/

Joe Cochran
Joe Cochran
4,430 Points

I think this is the most clever answer, however some sort of polyfill or fix would be necessary to get nth-child(odd) support in legacy browsers, like the dreaded IE8.

Neal Gist
Neal Gist
8,438 Points
Neal Gist
Neal Gist
8,438 Points

Can you please provide a URL to a live example?

Joe Cochran
Joe Cochran
4,430 Points
Joe Cochran
Joe Cochran
4,430 Points

I've made a codepen of your code to tinker with here: http://codepen.io/anon/pen/soDJH

The first thing I could think of that is happening is that your first image is not the same dimensions as the other images. Even a single pixel could be causing the first li to stop the third from going all the way to the left. In my example (without any modified code) it works as expected when all the images are 423x423.

On resize down however, the first caption will break to two lines, making it longer, also blocking the third item from floating all the way left. Setting a maximum height on #gallery li a p stops this text wrapping issue, though it could use some finessing to look perfect.

The only changes I made are adding placeholder images (since I dont have the originals) and adding line 122 of the css, max-height: 12px; to #gallery li a p

Brad Lacke
Brad Lacke
7,438 Points
Brad Lacke
Brad Lacke
7,438 Points

http://web-shhlnkgz47.treehouse-app.com/

that's my workspace, not sure if it's visible to all. It looks fine until you resize the browser window for mobile, and then the weird stacking happens.

Brad Lacke
Brad Lacke
7,438 Points
Brad Lacke
Brad Lacke
7,438 Points

this is the index.html

html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Brad Lacke | Artist</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700,700italic,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">  
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Brad Lacke</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/Allosaurus Color 2.jpg">
              <img src="img/Allosaurus Color 2.jpg" alt="">
              <p>Experimentation with dinosaurs and Treehouse.</p>
            </a>
          </li>
          <li>
            <a href="img/6-7 Deer Skull.jpg">
              <img src="img/6-7 Deer Skull.jpg" alt="">
              <p>Black and white study.</p>
            </a>
          </li>
          <li>
            <a href="img/Coelophysis.jpg">
              <img src="img/Coelophysis.jpg" alt="">
              <p>Primitive Dinosaur Linework.</p>
            </a>
          </li>
          <li>
            <a href="img/Chungkingosaurus.jpg">
              <img src="img/Chungkingosaurus.jpg" alt="">
              <p>Unfinished Chinese dinosaur.</p>
            </a>
          </li>
          <li>
            <a href="img/Ankylosaurus C.jpg">
              <img src="img/Ankylosaurus C.jpg" alt="">
              <p>Fully rendered with color and focal blur.</p>
            </a>
          </li>
          <li>
            <a href="img/Tonal Triceratops fin thouse.jpeg">
              <img src="img/Tonal Triceratops fin thouse.jpeg" alt="">
              <p>Experimentation with dinosaurs and Treehouse.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/thedodus"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/thedodus"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Brad Lacke.</p>
      </footer>
    </div>
  </body>  
</html>
Brad Lacke
Brad Lacke
7,438 Points
Brad Lacke
Brad Lacke
7,438 Points

Let me know if that helps at all or if there are add'l things I need to do to help you guys check out the code.

Brad Lacke
Brad Lacke
7,438 Points
Brad Lacke
Brad Lacke
7,438 Points

Thank both of you for your informative solutions to the problem...I wish I could "best answer both of you". Thanks for taking the time to help me sort this out.