Responsive images Are Not Behaving As Expected

[industrialdoctor]

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:
/responsive-web-design/responsive-web-design-projects/build-a-tribute-page

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

ht tps://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_responsive3

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:

abWBWWg

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:

freeCodeCamp.org

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.

[jsdisco]

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

[industrialdoctor]

That works for one test case, at the following

abWBWWg

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

[jsdisco]

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.