Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Brittany Wiatrak
PLUS
Brittany Wiatrak
Courses Plus Student 513 Points

Style my Portfolio

Hello Again, So I was watching the first video in Style my Portfolio dealing with putting your image gallery in 2 columns. So once I put all the codes in for float etc. My photos show up in 2 columns but there is a blank space below the first photo and next to the third photo, almost like there is suppose to be another photo but its missing but there isn't a photo missing. I messed around with the width and margin percentages and it seems to be something with this specific code #gallery li { float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; } As when I changed the width and margin from anything other then those percentages the block disappeared because they were in a single column. Can anyone explain why it is doing this in a 2 column set. I have looked at everything and don't know why. Thanks

Update I tried switching around the order of photos because it looks like that first photo has a bit bigger space then all the others. I thought maybe it was the photo but its not because when I switched places with two photos it did the same thing with the new photo so it has to be something with the code but I just can't figure out whats wrong.

7 Answers

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,803 Points

I found the code challenge you're referencing...and everything looks good. If you're not worried about the code challenge, but following along on your own, my guess is that there's a bit of extra markup before your third gallery item in the html, not the css. Either that or maybe the caption on your first image is running extra long?

I just finished that very same challenge and I did not see a similar issue. Would it be possible to see the HTML between your section tags?

Brittany Wiatrak
Brittany Wiatrak
Courses Plus Student 513 Points

I think this is what you are asking for? I inserted my own photos. It doesn't come with the spacing as it would in the workspace but here is what is between my section tags

        <ul id="gallery">
          <li>
            <a href="img/Thailand 1763.jpg">
              <img src="img/Thailand 1763.jpg" alt="">
            <p>Island Life in Thailand </p>
           </a>
          </li>
           <li>
            <a href="img/IMG_8595edited2.jpg">
              <img src="img/IMG_8595edited2.jpg" alt="">
            <p>Atomium, Brussels </p>
           </a>
          </li>
           <li>
            <a href="img/IMG_0264edited1.jpg">
              <img src="img/IMG_0264edited1.jpg" alt="">
            <p>View from Cabana in Yelapa, Mexico </p>
           </a>
          </li>
           <li>
            <a href="img/IMG_7978edit04.jpg">
              <img src="img/IMG_7978edit04.jpg" alt="">
            <p>Lush blue waters in Grand Turk </p>
           </a>
          </li>
           <li>
            <a href="img/IMG_2507edit03.jpg">
              <img src="img/IMG_2507edit03.jpg" alt="">
            <p>Sunset Skyline of Chicago  </p>
           </a>
          </li>
        </ul>
      </section>```

The first item I see is that your Thailand photo has a space in the file name. You may try to save the file as thailand_1763.jpg instead and update your references to it.

Also, you may want to get in a habit of using lowercase for your file names because case sensitivity could be an issue at some point.

Brittany Wiatrak
Brittany Wiatrak
Courses Plus Student 513 Points

Well I tried your suggestion on this and it didn't change anything.

Oh, and I also noticed that you have two images with "edited" in the name and two with "edit" in the name. Also, some are named with single digit numbers "1" and others with two digit numbers "04". Maybe just check that all the photos are referenced correctly and in the future, name them all using the same structure: portfolio_1.jpg portfolio_2.jpg portfolio_3.jpg and on.

Brittany Wiatrak
Brittany Wiatrak
Courses Plus Student 513 Points

I did it that way so I could tell which photos were the edited ones from the original photos. I don't think that has anything to do with the big space in between the photos. Thanks

Oh, I was just mentioning that some of them were named slightly different and to check and see if you had possible referred to one incorrectly. For instance, maybe IMG_2507edit03.jpg was supposed to be IMG_2507edited03.jpg.

Can you share the link to your Workspace Preview maybe?

I see what's going on now. Your first photo juts down a little further than your second photo and your third photo, because it is floating, is "catching" on that edge.

A few lessons down in the Responsive Web Design and Testing course, you would have run into this issue in the course with the photos they supplied. You used your own photos so your seeing the issue now, only in a slightly differently way. The lesson will cover designing for the desktop, making three columns, and running into this issue and fixing it with a declaration using the "clear" property. I'm sure you'll be able to take what they teach there and slightly change it to apply to your current issue with the mobile design.

I'd tell you more but I'd hate to detract from the upcoming lesson. Just know, your code isn't broke, you just haven't made it to the "how to fix it" portion yet :)

Brittany Wiatrak
PLUS
Brittany Wiatrak
Courses Plus Student 513 Points

Ok thanks that makes me feel better now. Thanks for all your help.