Responsive Web Design Projects - Build a Tribute Page - Stuck

Responsive Web Design Projects - Build a Tribute Page - Stuck
0

#1

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.


#2

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.


#3

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


#4

It’s showing the same error message.


#5

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.


#6

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


#7

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


#8

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.


#9

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.


#10

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


#11

np, glad it helped you out.