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:
<style>
h2 {
color: blue;
text-align: center;
}
img-div {
align: center;
}
.tribute-info {
align: center;
}
.responsive-img {
max-width: 100%;
height: auto;
}
</style>
<div id=main>
<div id=title>
<h2 id="A Tribute to Jonathan Trager"> A Tribute to Jonathan Trager</h2>
</div>
<div id="img-div">
<figcaption id="img-caption"> Jonathan Trager with his one true love, Sarah, walking in Manhattan on a December night."
</figcaption>
<a href=#>
<img id="image" class="responsive-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2n7Y8ohpCcdl-g3NA-Fwf7eqrnSsn3A0zTQ&usqp=CAU">
</img>
</a>
</div>
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.
try adding width: 100% as well as max-width: 100% to your .responsive-img class.
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 style tags.
