User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size. User Story #9: The

HTML-CSS
#1

Hi everyone, I need help. I can’t solve the points of my project and I’m stuck, User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

User Story #9: The img element should be centered within its parent element.

I need your help!

THIS IS MY CODE

#2

HI @ramallo96.sr !
Welcome to the forum!

The first thing I notice is that you have html tags inside your css section.
The css section should only contain css and not html tags.

When I remove all of the html tags from there, it should look like this.

#title {
  text-align: center;
}
#figcaption {
  font-style: italic;
  margin-top: 0;
  text-align: center;
}
h1 {
  text-align: center;
  color: black;
}
#img-div {
  max-width: 100%;
  height: auto;
}
.image-width {
  max-width: 100%;
  height: auto;
  display: block;
}
#image {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  margin: 0;
}
p {
  text-align: justify;
}

Once I clean that up, I opened up the test suite to read the error messages.
The first error message I see says this

  1. Within the “img-div” element, I should see an element with a corresponding id=“image”.

expected null to not equal null

When I look at your code, I see duplicate ids of img-div

<div id="img-div">
<img id="img-div"

Once you fix that error in the img element and use the correct id name then it should take you to 9/10.

The last thing you need to do is center the image.
If you google, how to center image css then the first result will give you the answer you are looking for.

Then you will be able to pass 10/10

Screen Shot 2022-03-07 at 4.42.33 PM
Screen Shot 2022-03-07 at 4.42.33 PM1000×554 89.6 KB

Hope that helps!

1 Like
#3

Thanks you!!! I did it!