Help please - Tribute page project

Need help for my tribute page project.
I’m new to coding, my code might not be optimal at all but i’m having some trouble with the “image” that needs to be responsive.

I like the result of my page, I would like to keep it that way, is there a way I could change my code to make it work?

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

Try using the “max-width” style property : expected ‘none’ to not equal ‘none’

The test output tells you what the problem is.

I like the result of my page, I would like to keep it that way,

It doesn’t matter what you want - you are a professional web developer. The UI/UX team and the product owners tell you what they want and your job is to figure out how to do it.

The user story tells you:

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

That is your requirement. If you don’t meet that requirement, you haven’t done your job.

As far as resolving the test, you can set it really, really big if you want so it won’t even have an effect. But you must satisfy the user story.

1 Like

Thank you for the feedback Kevin. I appreciate it.

You just make the image width be a percentage of the container.
That should work.

1 Like

That did it, I had to make it display as block first, adjust the width to be a percentage and set the margin-left/margin-right to auto to center the image.

Now everything works and I understand how to adjust/position everything much better now :smiley:

Good work! Positioning is my rubicon in CSS. I also have a hard time with that.