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

CSS jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 2

Henrique Machuca
Henrique Machuca
5,611 Points
Posted by Henrique Machuca
Henrique Machuca
5,611 Points

Image size problem - overlay

In my CSS I have a "img { width: 100% }" condition so all my images can resize in a responsive way. But because my image in this lesson is nested in the overlay, it expands to 100%.

Is there an easy fix for this?

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Henrique,

What I would do is instead of using the catch all "img" selector, I would put a class on your images that are displayed on the page. And then set the width to 100% (and any other applicable styles) for that class in your stylesheet.

And if you're adding any styling to your overlay images, add a separate class in your jQuery initialization of those images and of course in the stylesheet as well for those specific styles for the overlay.

Henrique Machuca
Henrique Machuca
5,611 Points
Henrique Machuca
Henrique Machuca
5,611 Points

Ok Marcus, I did that and it solved this issue, thank you!!

Marcus Parsons
Marcus Parsons
15,719 Points

You're very welcome! :)