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

[douglassfox79]

Here’s a link to my pen in progress.

MWraeyv

i have no idea why this isn’t working.
it works in my code editor just fine. VScode.
what am I missing?

[jwilkins.oboe]

HI @douglassfox79 !

Welcome to the forum!

I was able to pass the test with your code by making a few changes.

The most important thing is to open up the test suite and read the full error message because you are missing a few things here

  #image {
    text-align: center;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    object-fit: fill;
}

The error message will keep changing.
So keep reopening the test suite and make each new change until it passes.

Secondly, you need to remove these inline styles for the image tag.

style="width: 500px; height: 300px;"

Keep all of your styling in the seperate css section.

Hope that helps!

[douglassfox79]

jwilkins.oboe -

I really appreciate your response. I’ve been stuck on this for days. Let me show you what the whole error message is. (it’s below) and you’re right, the error message does change. but everything I’ve done is to no avail.
as you can see, this is why i had the inline styles for the image tag. it was wrong nonetheless because i had both the inline styling and the styling on the styling sheet as well. it just seems like no matter what i try and do i can’t get this last test to pass. and what’s the most confusing is that when i put this code into VScode and open it up to a live server page, everything checks out.
feeling defeated. I’ll let you know though that I did try everything you suggested and this was the same message I received.
feeling defeated.

#Layout- ## 1. The 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'
    at Function.n.equal ([https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:550:320](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:550:320))
    at n.<anonymous> ([https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:102390](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:102390))
    at [https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:259477](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:259477)
    at ny.Dg.run ([https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:259772](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:259772))
    at r.Qg.runTest ([https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:274680](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:274680))
    at [https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:275616](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:275616)
    at o ([https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:274033](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:274033))
    at [https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:274103](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:274103)
    at o ([https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:272852](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:272852))
    at [https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:273918](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:273918)

[jwilkins.oboe]

When I delete the inline styles, use the display block like it says in the error message and then center it using the margin property the test passes for me.

I think your issue is that you are trying to center it using the text-align:center; and that is what is tripping you up.

If you google, how to center an image css and click on the first result, you will see their code uses the margin property which you are not.
When you apply that change then the test will pass.

Hope that clears it up.

[douglassfox79]

I am so angry. i want to… this is what I’ve got now…

#image {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 300px;
width: 50%;
height: auto;
}

and still no pass. my error message is:

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Use the "height" style property with a value of "auto" for responsive images.: expected '300px' to equal 'auto'
AssertionError: Use the "height" style property with a value of "auto" for responsive images.: expected '300px' to equal 'auto'

[jwilkins.oboe]

Carefully reread this part here of the error message.

expected '300px' to equal 'auto'

The test is detecting a height of 300 px somewhere in your code.

If you look in your html, you still have inline styles here

style="width: 500px; height: 300px;"

Inline styles will override external stylesheets because they have a higher specificity.
You can read more about it here

Specificity - CSS: Cascading Style Sheets | MDN

@jwilkins.oboe

When I delete the inline styles,

You missed that part of my earlier directions.
When you delete the inline styles then the test will pass.

Hope that helps!

[douglassfox79]

lol… I’m terribly sorry. You’re absolutely right. I missed that because I’ve been super frustrated.
so i got rid of the inline styling. and I remember reading how inline styling takes precedence over CSS styling. I don’t know why that didn’t click in my brain way earlier. That should have been a, “duh”.
So, i fixed that. And then a new error message comes up. lol. Crazy, right? But it has something to do with something else entirely. At this point, i’m just so grateful to have a different error message. This is what the new error message says.

Within the “img-div” element, I should see either a or

element with a corresponding id=“img-caption” that contains textual content describing the image shown in “img-div”.

I’m repairing it as I type this. as I go.
This is how my code is and what I’m missing.

<img id="image" src="[https://i.ytimg.com/vi/KEpu5t5DV6Y/mqdefault.jpg](https://i.ytimg.com/vi/KEpu5t5DV6Y/mqdefault.jpg)" alt="perseverepic"

And I’ve repaired it to this:

<div id="img-div" descriptive text

AND IT WORKS!!! 10/10!!!

My goodness… Thank you for your patience, insight and direction. You’re a lifesaver. I really appreciate your help.

[vanessaykomatsu]

THANK YOU, GUYS!

I was stuck into this too!

Basicaly it’s not to use “text-align: center;” and edit the “image” specifically