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

Zenikaya Webb
Zenikaya Webb
3,191 Points
Posted by Zenikaya Webb
Zenikaya Webb
3,191 Points

Gallery images not taking up full space of their columns

I made the mistake of coding at the same pace as Nick without checking to see if my page looked the same as his. Somewhere along the way I messed up and now my page has 3 columns, but the images inside of them are small and so is the text area. Here's my code https://w.trhou.se/nwa8pxhngw If anyone can help me figure out what I did wrong I would greatly appreciate it. Thanks!

1 Answer

Michael Lambert
Michael Lambert
6,286 Points
Michael Lambert
Michael Lambert
6,286 Points

Hi Zenikaya,

Your first problem is in the main.css

You are selecting the wrong element on line 111. Your code shows:

Problem 1

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

you need to select #gallery li

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

Problem 2 The next problem is in the index.html file. You are using multiple unordered lists and using the same id name for all of them which you should never do. You just need to have the opening <ul> tags at the start of the gallery and </ul> at the very end of the gallery.

Your code looks like thiis:

<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>   
        </ul>
         <ul id="gallery">
          <li>
             <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with bleeding modes on photoshop.                 </p>
            </a>
          </li>
        </ul>
         <ul id="gallery">
          <li>
             <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
           </li>
        </ul>
         <ul id="gallery">
          <li>
             <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
           </li>
        </ul>
         <ul id="gallery">
          <li>
             <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repitition.</p>
            </a>
           </li>
        </ul>

Just delete the additional </ul> <ul id="gallery"> from between all your images or just copy the corrected code below:

<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>Playing with bleeding modes on photoshop.                 </p>
            </a>
          </li>
          <li>
             <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
           </li>
          <li>
             <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
           </li>
          <li>
             <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repitition.</p>
            </a>
           </li>
        </ul>

Once have made the above two corrections it will work as expected.