Tribute Page Parts 5 and 8

Hi all,
Parts 5 and 8 of my Tribute page won’t pass the test. There is a caption for the image and the image resizes so I don’t know where the problem is. I have spent a ton of time but trying to figure it out but I’m just stuck! I know that the content of the page is junky but I just want to figure out the code requirements then I can actually make the content.
Thank you!

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

Challenge: Build a Tribute Page

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-pageCode

Hi Janie! If you post the link of your codepen project will be possible for me or others to try to help you

Sorry, I thought I had.

https://codepen.io/Jayeknee/pen/KKgowPe

Here it is

Remember, 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.

The first failing test says;

Within the "img-div" element, I should see either a <figcaption> or <div> element with a corresponding id="img-caption" that contains textual content describing the image shown in "img-div".
expected null to not equal null 
AssertionError: expected null to not equal null

The next failing message says;

The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Use the "display" style property with a value of "block" for responsive images.: expected 'inline' to equal 'block'
AssertionError: Use the "display" style property with a value of "block" for responsive images.: expected 'inline' to equal 'block'

Hi, for test 5, <figcaption> are expected to only be within <figure>, and since you have used a <div> for your #img-div your <figcaption>isn’t registering.
EDIT: the error is not in the tag but in fact in the id as noted by @Roma
for test 8, the failing message says: Use the “display” style property with a value of “block” for responsive images.: expected ‘inline’ to equal ‘block’

1 Like

@MatchaCrisp, that’s not why the test is failing. Reference the failing message to see why it fails.

1 Like

Thank you for your help, I really am trying to read the error messages. Here is the code I have. Isn’t the "<figcaption >" within the "img-div"?

 <div id="img-div"> 
    <img id="image" src="https://www.slantmagazine.com/wp-content/uploads/2015/07/commentary_anidifranco-2.jpg" alt="Ani DiFranco"> 
    <figcaption id="image-caption">Young Ani DiFranco facing the camera in a white tank top.</figcaption> 
  </div>

Good job fixing the one.

Let’s read the failing message again;

Within the "img-div" element, I should see either a <figcaption> or <div> element with a corresponding id="img-caption" that contains textual content describing the image shown in "img-div".
expected null to not equal null
AssertionError: expected null to not equal null

Now let’s look at what you have;
<figcaption id="image-caption">Young Ani DiFranco facing the camera in a white tank top.</figcaption>

Seems to be a divergence in the id the test is looking for and the id that you coded.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thank you, I was surprised when the image popped up on the post.

… Oh my gosh I see I wrote out “image” instead of putting “img”. I don’t even want to tell you how long I was staring at the code trying to find a spelling error.

I appreciate your help!

1 Like

You’re welcome. Glad to be of some help.
That’s why it’s important to read the failing message thoroughly although I do know that a second set of eyes sometimes help us to really see.
If you would’ve taken a break it would’ve hit you too. :slightly_smiling_face:

Now, on a side note. I don’t know if you’re going to ask for feedback on your project and since there is a coding error you should be aware of I thought I’d point out how you can find and correct it. Another who was offering help noted it although it wasn’t the cause of the test failing.

  • Run your HTML code through the W3C validator.
    You will see the error that was referenced and it is something you should correct.
1 Like