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
Tim Arwine
5,406 PointsIs it my CSS code? Or a bug at Treehouse?
The gallery pics don't resize along with the browser. They stay big and ugly. Anybody else encountered this problem?
Here's the relevant code:
#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.75em;
color: #bdc3c7;
}
7 Answers
Julian Aramburu
11,368 PointsNo you dont...this is pasted from your code:
/*********************
GENERAL
*********************/
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration:none;
}
image {
max-width: 100%;
}
See where the "image { max-width: 100%}" part is? That's a mistake, you should write img and not image cuz thats the proper way to target the img element...
and as I've said for the red marked code please recheck your code and you'll realize where your code differs from the one in the lesson, this is a good way to train how you code and how to debug your code. If after you search it you still CANT find any difference in your code, comeback here for hints and help :)!
Kevin Korte
28,149 PointsIt's almost impossible to answer without the HTML too, but there is nothing in there that specifically targets an image. Also, this quiz has been around for so long it's likely not a bug. I'd be happy to help you further, just need to see more of the picture. Can't tell for sure from that code.
Tim Arwine
5,406 PointsHi Kevin, Not sure how to follow up with you, but I'd be happy to share the html with you. Thank you for your offer. OK, Here goes. BTW, how do I add backtics or whatever so the code shows up correctly? Thanks! ~+~+~ <!DOCTYPE html> <html> <head> <meta charset="utf-8></met>" <title>Tim Arwine | Developer </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,800,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Tim Arwine</h1> <h2>Developer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</li></a> <li><a href="about.html">About</li></a> <li><a href="contact.html">Contact</li></a> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="image/numbers-01.jpg"> <img src="img/numbers-01.jpg"alt=""</li> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="image/numbers-02.jpg"> <img src="img/numbers-02.jpg"alt=""</li> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="image/numbers-06.jpg"> <img src="img/numbers-06.jpg"alt=""</li> <p>Trying to create an 80s style of glows.</p> </a> </li> <li> <a href="image/numbers-09.jpg"> <img src="img/numbers-09.jpg"alt=""</li> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="image/numbers-12.jpg"> <img src="img/numbers-12.jpg"alt=""</li> <p>Creating shapes using repetition.</p> </a> </li>
</ul>
</section>
<footer>
<img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
<a href="http://facebook.com/DesertHorse"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"</a>
<p>© 2015 Tim Arwine.</p>
</footer>
</div>
</body>
</html> ~+~+~
Kevin Korte
28,149 PointsThat works. Just post your html here.
Julian Aramburu
11,368 PointsThere we have it! You double closed the li element, and also you forgot the closing ">" in your img element , let me show you:
<li>
<a href="image/numbers-01.jpg">
<img src="img/numbers-01.jpg"alt="" <-----Here you should add the closing tag > </li> <---- THIS IS THE EXTRA LI CLOSING TAG
<p>Experimentation with color and texture.</p>
</a>
</li>
In order to be clear, your code should look like this:
<li>
<a href="image/numbers-01.jpg">
<img src="img/numbers-01.jpg"alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
Tim Arwine
5,406 PointsHi Kevin, Actually I've passed all the tests and have no problem moving forward. It just bugs me that this one element doesn't work. If you'll notice, everything else IS working for me (all the other exercises...). That's why I can't understand this problem. And my code comes straight from the videos. Anyway, I've posted a snapshot below if that helps. I really would like to get to the bottom of this. Thanks.
Julian Aramburu
11,368 PointsHi Tim! It seems you are missing your hashtag in your ID selectors ... in the code provided by treehouse the gallery is set as an ID so in order to target the gallery properly you must code:
#gallery {
property = value;
}
Kevin Korte
28,149 PointsGood call! He did have them there, just the markdown parse was removing them because they weren't inside the three backticks. I added those so we'd get the proper syntax.
Tim Arwine
5,406 PointsKevin, I appreciate your help. Let me know if you need more info or a link to my workspace. Ive pasted my html just above. Thanks.
Julian Aramburu
11,368 PointsThen if he had used the proper syntax another problem could be if that specific element he wants to style has the ID gallery or not. It would be useful if he could paste the workspace here or his html code aswell.
Tim Arwine
5,406 PointsHi Julian, Thank you. I've corrected the extra LI in each image, but it still doesn't work. Hmmm what have I done wrong??....
Julian Aramburu
11,368 PointsDid you add the closing tag to your img element? You missed that too!
Tim Arwine
5,406 PointsYes. At the same time as I was correcting the LI tags....
Julian Aramburu
11,368 PointsCould you use the snapshot in the workspace to share the ws with us? So we can check deep in the code for some other error you may have.
Tim Arwine
5,406 PointsSure Julian, Is this right? https://w.trhou.se/01bbsqsi7t Thanks
Julian Aramburu
11,368 PointsOk now we can sort this out! first of all the problem with your images not resizing is that you target your img elements like "images" in your css file... the proper way to do this would be :
img {
max-width: 100%;
}
Now your images would fit nicely in your page :)!
But! See how you have all those tag elements marked in red in your index.html file? Well that means that you have some problem in your markup I would sugest that you take some time in order to re-check your code and the proper way to write it and if you still cant figure this out come back here and we'd gladly help you out!
Tim Arwine
5,406 PointsJulian, That's strange because I have that exact code in my css. As to the red marked html, I am totally at a loss since it was copied verbatim from the video.... I'll keep searching for what's wrong. Thanks.
Tim Arwine
5,406 PointsTim Arwine
5,406 PointsI see I see. Sorry. OK... Yes. I see it. Have just corrected it. It works now. Wow. So small, so simple.....!!!! And yes, now I'll be looking for why I have those red tags. Julian, I noticed your profile says you are from Buenos Aires. I sure would like to ask some questions about South America sometime... Anyway, thank you again for pointing out my mistake.