Tribute Page: The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size

Hi. I’ve read all the other topics on this that I could find, but I’m still stuck. I can’t seem to pass this test. Can anyone help? I’m using CodeSandbox since CodePen isn’t accessible for blind users. My code so far is here.

The image is not loading for me if I replace it all the tests pass.

Can you try this link below instead, not sure how best to post the link for you?

https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Cokley_Headshot.jpg/1176px-Cokley_Headshot.jpg

1 Like

Yes, I’ll try that. Can you describe the picture for me so I can put alt text and a caption, unless it’s the same?

It’s the same image just using a different URL.

Now I’m failing two tests. I tried adding margins set to auto but that didn’t help. Sorry for the constant questions but I have no idea how it looks to help me understand what I might be doing wrong.

That is really odd. It is passing on Codepen but failing on Codesandbox. When I inspect the image on Codesandbox using the dev tools it doesn’t have any styles which I just don’t understand.

I will have to look at this some more to see if I can figure it out.

Oh, I’m just dumb. You are just not linking to the stylesheet, that is why.

You need to add this link below to the head element (inside it).

<link href="./src/styles.css" rel="stylesheet">

1 Like

If you need help with anything just ask.

Thanks! That fixed it. I think I’ll rename my project to something that makes more sense, submit it, and then work on a template I can use for future projects.

Great!

Yes, having a template is probably a good idea, it’s also just nice not having to do boilerplate stuff every time you start a new project.

Happy coding.

1 Like