Responsive Web Design Projects - Build a Tribute Page - Stuck

Hi, there.
This is the link to my tribute page My Tribute page for Disney.
I’m still working on it.
When I ran tests it’s showing me this message.


The image is resizing properly in my browser.
Would you tell me what’s happening?

Thanks.

You will need to give id image to the image element itself not its container div. Then give max-width: 100% like you already do.

They want you to use max-width on your IMG tag.

It’s showing the same error message.

Give your image display:block and height:auto;

Also take a look at the log it generates. It will give you details to why you are not passing tests.

1 Like

It worked.
I set display: block and height: auto;
I still didn’t understand how?

That is how you make an image responsive inside a container. Whatever the size of its container, its width and height will adjust accordingly.

Here’s another link to the tribute page. https://codepen.io/abdul-grey/full/WgQBzV
I didn’t set display: block and height: auto;

It worked just like previous one.
Would you tell the difference between two?
I’d like to know. If it’s not too much to ask.

You are using using flex to its container with flex-direction:column. Therefore your image block will only take up one row at a time. Within that row, you are giving your image max-width:100% which makes your image responsively. height:auto and display:block are usually optional I think because height will still adjust automatically due to max-width property and images are by default display:inline-block.

I appreciate for you help.
That’s really helpful.
Great day.

np, glad it helped you out.

1 Like