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
Paul Girard
552 PointsMy images only show as standard picture thumbnails on my preview tab.
My preview page loads but the images appear as thumbnails instead of the full size pictures like in the video? When I click on each individual picture (on preview page) they do load up, but I assume there should be pictures rather than thumbnails before i do this? Please help!
6 Answers
Craig Watson
27,930 PointsHi Paul,
I you creating the index.html file with the 5 images on ?
Craig
Paul Girard
552 PointsYes the images are on the index.html so when I click on the thumbnail the real images come up
Craig Watson
27,930 PointsHi Paul,
Code should look like below,
index.html file
html
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>playing with blending modes in Photoshop</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>playing with blending modes in Photoshop</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>playing with blending modes in Photoshop</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>playing with blending modes in Photoshop</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>playing with blending modes in Photoshop</p>
</a>
</li>
</ul>
</section>
Check you markup look like the above is so I will drop in the relevant css for the images I would also check you have the correct href="" 's for the images as things are easily overlooked at all levels of coding.
Regard Craig
Paul Girard
552 PointsThanks Craig. I'll have a really good look. Hopefully it will work!
Craig Watson
27,930 PointsNo problem,
here is the relevant css just in case you want it for reference:
css
img {
max-width: 100%;
}
/*****************************
page: portflio
*****************************/
#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;
}
hope this helps in some way Paul !
Craig
Paul Girard
552 PointsThanks craig. It all works now. All I needed to do was start that HTML line from scratch and be patient and it works now. Really couldn't see what i'd done to begin with though!
Craig Watson
27,930 PointsHappenes to everyone from beginners to experts Paul my flaw is css selectors ... Once im past the normal element / id / class selector i hit a wall lol , but there really is some great resources out there my favourite is the mozilla dev network if you become familiar with that it will become a huge help in the near future!
Craig