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
Brittany Wiatrak
Courses Plus Student 513 PointsStyle 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
Courses Plus Student 15,815 PointsBrittany,
Which course are you taking?
asdfasdfasdf13e
22,713 PointsI 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
Courses Plus Student 513 PointsI 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>```
asdfasdfasdf13e
22,713 PointsThe 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
Courses Plus Student 513 PointsWell I tried your suggestion on this and it didn't change anything.
asdfasdfasdf13e
22,713 PointsOh, 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
Courses Plus Student 513 PointsI 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
asdfasdfasdf13e
22,713 PointsOh, 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?
Brittany Wiatrak
Courses Plus Student 513 Pointshttp://web-mfwbd3gmb5.treehouse-app.com/ See if that works for you. I used my own photos as he said you could.
asdfasdfasdf13e
22,713 PointsI 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
Courses Plus Student 513 PointsOk thanks that makes me feel better now. Thanks for all your help.
Shawn Flanigan
Courses Plus Student 15,815 PointsShawn Flanigan
Courses Plus Student 15,815 PointsI 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?
Brittany Wiatrak
Courses Plus Student 513 PointsBrittany Wiatrak
Courses Plus Student 513 PointsSo do you know how I would fix the problem?