Tribute Page Image Responsive Error

So I have a Tribute Page and with the tests, all of them are passing except the one that says “The image should responsively resize based on browser window size”. The image does in fact responsively resize in the browser and even in the CodePen Preview. What am I doing wrong?

HTML Code:

<div id="img-div">
            <div id="image">
                <img src="" alt="Paul Walker" class=".resp">
            <div id="img-caption">
                <p cid="tribute-info">Picture of Paul Walker in front of a Toyota Supra. The car made a notable appearance in the movie "The Fast And The Furious"</p>

CSS Code:

.resp {
    style: none;
    width: 100%;
    height: auto;

    margin: 20px;
    width: 80%;
    height: auto;
    max-width: 80% ;
    position: relative;
    margin: auto;
    display: block;

@media only screen and (max-width: 480px) {
  img {
    width: 100%;

Full CodePen Project:

Also in case you are wondering, I tried the tests in Safari and Chrome, both of them have the same result.

Hi @parsa.farjam!

Welcome to the forum!

I want to point your attention to this user story first.
User Story #4: Within the img-div element, I should see an img element with a corresponding id="image" .

You have created an extra div between the img-div and img element.

When I move the id="image" to the img element and delete that extra div it works for me.

While we are here there are two things that need mentioning.

  • For codepen, you do not need to include doctype, html and head tags. That is taken care of for you. If you need to include a link in the head section there is a place in the settings to do that.

  • Do not use br tags to force lines breaks. Use css instead. Br tags should only be used when line breaks are significant like in a poem or address.

Hope that helps!

if you read below the failed user story you can see more details