Responsive images Are Not Behaving As Expected

Tell us what’s happening:

I can get 9 out of 10 of the tests to pass for the first CSS project – the tribute page. As I alter the code back and forth I sometimes break another of the tests.

Challenge: Build a Tribute Page

Link to the challenge:

I thought I could see how responsive images worked in general by using the example at:

ht tps://

That code goes as follows:

.responsive { width: 100%; max-width: 400px; height: auto; }

Responsive Images

If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.

Resize the browser window to see the effect.


If you go to that web page, you will see that you can resize your browser and the image will expand or shrink, but it won’t expand past its limit.

So I tried imitating that as follows:

And the image does not scale down.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 OPR/77.0.4054.203

Challenge: Build a Tribute Page

Link to the challenge:

Also, I have been going back through the CSS lessons . There is one relevant lesson, titled “Make an Image Responsive,” so I am restarting from there.

Remove the <style> tags, those are HTML tags and don’t belong into the CSS panel.

1 Like

That works for one test case, at the following

but it does not seem to work for the main project. I will keep hammering on it. Thanks for the tip, though.

You haven’t included a link to your project, so I can’t say what’s the problem, but be sure to read more than just the first sentence of the error message of the failing test - it’ll give a a hint about what’s missing.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.