<img> element should responsively resize, relative to the width of its parent element, without exceeding its original size

Hello all, requesting some help with my CSS code. I received the error on the above subject line . Please see code below and let me know if you see what caused this. Thank you-

body {

text-align: center;

}
h1 {
font-family: Sans-Serif;
font-size: 35px;
background-color: grey;
}

h2 {
color: #8b0000;
font-size: 23px;
}

#img-div {

max-width: 100%;
height: auto;

}

#img-caption {

font-family: Sans-Serif;

}

p {
font-family: Helvetica;

}

.tribute-link{

font-size: 15px;

}

This is not referencing an <img> element.

Thanks for the feedback @nhcarrigan, I also tried:
img {
max-width: 100%;
height: auto;
}

but this did not work as well , any ideas?

Perhaps you could provide your CodePen link? It would be easier to debug if I could see the full setup.

Hi! I am experiencing the same issue. Not sure what I’m doing wrong. I provide my (very basic and ugly, don’t laugh :P) CodePen link. Thank you for the help!

https://codepen.io/Allvvaro/pen/bGVYNQv

Hello! Make sure you keep the test suite script in your CodePen. It’ll help you a lot!

I ran the tests, and failing the image resizing test generates an error code that should help you figure out what code to add. :slight_smile:

Just got it! I hadn’t noticed the information provided by the test app. Thank you so much! Hope this helps alaga-droid aswell.

@nhcarrigan, here’s my CodePen link: https://codepen.io/algala-droid/pen/ExVwazK?editors=1000

< id = "img-div" >
This is not a valid HTML element. id is an attribute.

I changed it to <div id = "img-div>

Now that you’ve done that, run the tests again and click the red button. You’ll see the list of tests, with error messages for the ones you did not pass.

These error messages are very helpful in determining what code you need to add to make the test pass.

1 Like

Looks like that corrected much of the errors I was getting. Thank you @nhcarrigan