Tribute page challenge img align/responsive problem

Tell us what’s happening:
For the tribute page challenge, I have gotten a check mark for the align photo part, but something changed and I can’t figure out what.

Also, I have checked and double checked the responsive img part of the challenge. I can’t tell what I am doing wrong.
Can you please help me? Here is my pin.

Your code so far

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

Welcome to the community!

For starters, I would recommend putting the following code at the top of your HTML to make it easier to test within the page:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

As far as the code itself, I think this has me thrown off. I’m used to seeing an img tag with an src attribute with the image’s source in there. However, this appears to be something entirely different, using imgur’s classes and scripts.

I would recommend, for the purposes of this project, to avoid using imgur. I’m not even sure how the tests on freeCodeCamp’s end would account for imgur’s classes. Maybe a moderator can clear that answer up more, but I would say using a div and an img tag with the img centered within the div is what is expected for this.

@jessicjames If you click on the red button that tells you how many tests you have passed out of how many tests there are, Layout #1 tells you exactly what you need to do in order to have that test passed. You are missing one piece of code.

Hi @jessicjames,
As you know from the previous posts;

  • The test script should be included, with all tests passing, when you submit your projects.
    • Click the red button to see which test(s) are failing and text to help you correct the issue.

For this issue the test may fail one time with one message and when you correct it you see the same test fail again. This time though it will be a different message. Without changing the code that fixed the first issue, now add the code for the current failing test. Keep going until the test passes.
You can also revisit the lesson about making an image responsive.

On a side note, imgur does not play well with codepen. It’s best to search for the image you’re looking for. Right click on that image and select “copy image address” and paste that into the src attribute of your img element.

Thanks so much. I will try that with the next image.

The info about the test was very helpful.
I got it completed now. Thanks again.

Thanks. I completely missed that helpful hint in the test. That made all the difference.

Thanks for the warm welcome.

I didn’t even think about putting that code in my pin. That made things so much easier. I didn’t really understand how the whole “fork” thing worked, but now I have a clearer understanding thanks to you.

What I saw is that ur image source is the webpage where u got the image and not the image’s address use
Try this code,

<a href="https://i.imgur.com/SFXx6sw.jpeg"></a>
       <a href="https://imgur.com/sC1knPv"> <img id="image" class="responsive-img" src="https://i.imgur.com/SFXx6sw.jpeg"><nav id="img-caption"> </a>