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.
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’
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>
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.
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.
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.
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.