FreeCodeCamp test failed even though I seem to have fullfield the requirements

[FacundoAr]

Here’s my Tribute Page for free code camp.(https://codepen.io/FacundoAr/pen/QWKPoZd?editors=1100)

I’ve left some questions as comments inside the code in css.

the image resizes and it doesn’t get bigger than it’s original size, so I don’t understand why the test says that I failed that part.

Also it doesn’t recognize my “tribute-info” id that i’ve put in the section tag.

Anyway, thank you for reading. Any feedback about the code will be appreciated!

[Roma]

Welcome to the forums @FacundoAr.

First, keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)

• The test script, with all tests passing, should be included when you submit your projects.

When a test fails click the red button to see which test(s) are failing and text to help you correct the issue.

• Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

Some additional things to help you succeed with this project;

• Run your HTML code through the W3C validator.
  • There are HTML coding errors you should be aware of and address. You have invalid HTML elements (<date> and </br>), attributes are not set correctly (I see one that is not in quotes)
  • Since copy/paste from codepen you can ignore the first warning and first two errors.
• In addition, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Reference MDN Docs

[jwilkins.oboe]

Hi @FacundoAr !

Welcome to the forum!

@FacundoAr

Also it doesn’t recognize my “tribute-info” id that i’ve put in the section tag.

You do have an id called tribute-info in the section tag but you also have this stuff right after it.

     </figure>
    </div>
    </br>

I would ditch the br tag and the proper way to write a br tag is this way <br>
I would move the div and figure ends tags up and out of the section element.

I think it is a good first start.
You just need to clean up those things mentioned earlier.

And then you have some tags that you are not really using.

For example, here

  <footer></footer>

It is good to use semantic tags like the footer tags but you didn’t really put anything in it so it doesn’t need to be there.

And then here

        <div id="title">
          <h1>Demetria Devonne Lovato</h1>
        </div>

I don’t think you need this extra div. You can just place the id in the header tag and ditch the div tag.

Keep learning and building!

[FacundoAr]

Thank you! I just fixed it.

One more thing, I was intending to add a background color to the image, and I had the idea of coloring the div and reducing its size, but when I did that the image size changed and became way smaller. So I tried to add border width, but that made the image to be no longer in the center if you’d tried to re-size the window.

What should I do? I just wanted to add a decorative element around the image with the color white.

[FacundoAr]

Thank you for the prompt reply! I really should’ve paid more attention. I’ll delete my date “tags” that I’ve invented. And I’ve fixed the attribute value without quotations thanks, now the tests are 10/10

[jwilkins.oboe]

It would help to see your code of what you tried.

I just added a border around the image and it worked on my end.

[Roma]

Maybe you haven’t saved yet. I’m not seeing the test script.

[FacundoAr]

Yes It works, but if you re-size the window and make it smaller the image at some point, I believe that it is less than 400px width, the image is slightly turned to one side and no longer in the center.

#image {max-width:100%;
  width: 100%;
  height: auto;
  display: block;
  margin: auto;
  border:solid;
  border-width:50px;
   color: #ffe4e1;
}

after these changes the image is slightly moved to the right and no longer in the middle. You actually have to scroll to the right to be able to see the image and it’s border completly. Also, the caption is no longer under the image since the image is no longer in the center.

[jwilkins.oboe]

I would just lessen the border-width for devices smaller than 400px.
So can do that in the media queries.

[FacundoAr]

Oh, I didn’t want to add it to my original code pen, since I plan to keep it as my portfolio some day, I just checked by copying and pasting on the code pen with the test to check if it has fullfield the requirements. However, now that I think about it a tribute page, specially this one, won’t get me a job at all so I now have added it.

[jwilkins.oboe]

@FacundoAr

I didn’t want to add it to my original code pen, since I plan to keep it as my portfolio some day,

If you wanted to use other projects down the line in your portfolio, I wouldn’t use codepen anyway.

I would suggest deploying it and using something like github pages.

[FacundoAr]

And If I wanted to move the caption to be within the border, should I use the flexbox?

[jwilkins.oboe]

In that case, you could remove the border from the image, and create a background color for the image div, set the width for the image div, and center it with the margin property.
Then you can add padding for the image to your liking.