Help me with Tribute Page

1

I am getting 9/10 on checking, please me out in finding that one mistake…

https://codepen.io/razawat/pen/qBOjKQJ

2

Hello!

It looks like your img properties in your CSS don’t define a max width. Try setting your “width” and “height” to “max-width” and “max-height”.

This will keep your image looking the same for you, but would shrink it down if I loaded your page on my mobile phone.

1 Like
3

it’s still 9/10…

4

Hi, i was stuck at this point too. Im pretty new to this but managed to pass the test by making the image container a flexbox by using:

#img-div{
background-color: white;
display: flex;
flex-direction: column;

and then assigning the info in the responsive image tutorial to the image:

#image{
align-item: center;
max-width: 100%;
height: auto;

I hope this helps… if anyone who is more experienced can point out flaws i would be grateful! I dont want to be providing the incorrect info

5

The image is an inline element. Make it display: block. For it to resize with the container make the width: 100%, height: auto . To center it use margin: 0 auto.

img{
    display: block;
	height: auto;
	width: 100%;
    margin: 0 auto;
 }

Remove the rest of the styling on the img element. Happy Coding!

1 Like
6

@nibble Here is my original code that didn’t work:

.image{
    max-width: 100%;
    height:  auto;
    display: block;
}

In another thread I found this code:

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

The code worked and the tests gave me 10/10 but, I don’t know why. I can see the difference in the code but, I don’t know what those differences mean.

I was trying to figure it out when I found your code. It’s cleaner, simpler and it works perfectly. However, the test gave me 9/10.

Can you help me understand the difference? Or, can you point me somewhere where I can figure this out?

Any help is appreciated
My codepen: https://codepen.io/ej-salga/pen/zYvbodX