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
Terrance Corley
11,990 PointsI need your help.
I have an issue with an overlay on my menu gallery images. When the gallery is stacked as a column the overlay displays fine, but when the gallery stretches to a two column layout the overlay extends past the height/width of the images. I've played with it a bit and can't seem to find a fix. I've linked my Github for the site here. My live site is here.
Any help is greatly appreciated!
2 Answers
Mike Wagner
23,888 PointsAs a starting point, there are several lines in your CSS that have been "commented" out using the wrong comment structure for traditional CSS, though depending on some things on your end, that may not be an issue. Ignoring that (since fixing it didn't change the behavior of your site), I "uncommented" them and decided to pursue your problem further. It seems that, for some reason, the <li> elements are expanding beyond the size of the images. Rather than try some hacky fix, I toyed around with it a bit and it seems that changing this
/* REMOVE THIS
.gallery-img img {
margin-bottom: 5.5em;
}
*/
to this
.gallery-images li {
margin-bottom: 5.5em;
}
will fix the problem. I didn't want to dig into it too much more but somewhere along the way you're handling the sizing of the elements, the images aren't filling the list items properly, and there seems to be some wonky behavior with your overlay expanding to fill the <li> despite this. By adding the margin to the image itself, you expand the <li> while the overlay is set to fill the space. I can't guarantee this fix to work 100% but it worked on the amended files I pulled from your github and with a live CSS editor on your active site, all the way up to standard 4k resolution.
Simon Duchaine
14,441 PointsHi, Terrance,
I just checked it out and it seems that the real problem isn't with the overlay but with the images.
Your overlay span the entire width of it's parent (.gallery-img). But your images are smaller than the <li class="gallery-img"> width.
So, either change your markup so that your overlay is sibling of <img> (in a div, making your div position:relative) or change your img to be 100% of its container.
Terrance Corley
11,990 PointsThanks for taking the time to respond Simon. I really appreciate it!
Terrance Corley
11,990 PointsTerrance Corley
11,990 PointsHey Mike,
Firstly, thanks for taking the time to work on my issue!
Yeah, in regards to the commenting I placed in my css I had left them in the code temporarily but I have no idea that style of commenting out wasn't best practice, so thanks for pointing that out.
I ended up going with your solution in the end since it seemed the most efficient and it worked! I can't believe I missed that myself haha. Thanks again Mike!
Mike Wagner
23,888 PointsMike Wagner
23,888 PointsTerrance Corley - No problem, I'm glad I was able to help. It's issues like that which keep me from messing around too much with pure CSS and push me to alternatives, haha. Also, that's quite a nice setup you're working on. It was refreshing to see. Keep it up :)
Terrance Corley
11,990 PointsTerrance Corley
11,990 PointsMike,
Sorry this is a bit late.
I know exactly how you feel in regards to favoring alternatives to pure css haha, but I'm revisiting the basics for this site. Hey, thanks! Thanks again for helping me out!
Cheers. :)