Thank you in advance for being willing to help out. I’m working on my tribute page for Responsive Web Design certification, and I’m having a hard time getting my “image responsively resizes” test to pass. I can’t seem to figure out where I’m going wrong. Below is (most of) the code:
<h2 id="A Tribute to Jonathan Trager"> A Tribute to Jonathan Trager</h2>
<figcaption id="img-caption"> Jonathan Trager with his one true love, Sarah, walking in Manhattan on a December night."
<img id="image" class="responsive-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2n7Y8ohpCcdl-g3NA-Fwf7eqrnSsn3A0zTQ&usqp=CAU">
If someone could give me a hint as to where I should look from here, I’d be really appreciative.
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 (’).
Ignore this it was just an inferior version of @JeremyLT comment
width: 100% as well as
max-width: 100% to your
They do subtly different things that combine to make the image responsive. It’s covered in the lessons so it might be worth going back through and redoing that lesson
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 error 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'
Do you understand what the test is looking for?
On a side note, do not use internal styling. Everything in between the
style tags belongs in codepen’s CSS editor. Do that and get rid of the
Thanks everyone for your help!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.