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
iainmuirhead
2,024 PointsMy code is missing something.
1 A photo too small within my portfolio photos. Missing I guess some code.
2 About/Contact photos have a small dot top left. Missing code?
Any help would be awesome.
Thanks
4 Answers
James Arroyo
645 PointsThe link you sent me, you haven't modified the image sizes - Though this works on desktop, you will have to modify them for mobile. My suggestion would to display each list as a block with a width of 100%.
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="" height="281.92">
<p> Experimentation with color and texture.</p> </a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p> Photoshop night sky magic.</p> </a>
</li>
<li>
<a href="img/numbers-14.jpg">
<img src="img/numbers-14.jpg" height="317.25" 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 repetition.</p>
</a>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="" height="317.25">
<p> Experimentation with design.</p>
</a>
</li>
</ul>
</section>
James Arroyo
645 Points1) replace this with your current line of code for the smaller image. <img src="img/numbers-14.jpg" class = "image-alt" width ="423px;" height="317.25px;"alt="">
iainmuirhead
2,024 PointsThanks James. I need to figure out why we had to make this change to the <img src line code...scratch head.
James Arroyo
645 Points2) Add this to your CSS :
li{list-style-type:none;}
James Arroyo
645 PointsYou had two different sized images between your two lists. The list will always be the size of its contents, meaning one list was larger than the other because one contained an image with a larger height. To solve this I used chrome debugger and found the height of your larger image to be 317.25px, and made amendments to your smaller image by modifying its height also to 317.25px. Meaning both lists were then equal heights and measure up :) in this case it worked well, however this method in practice isn't great - as you're modifying with the natural image ratio - by modifying its height or width too much it can become a bit too stretched meaning you lose image quality. But in your case this was a viable solution :) hopefully this helped!
iainmuirhead
2,024 PointsThis works in the mobile size but when stretched to desk top the photo returns back to the smaller size. scratch head!