I have problem with responsive image of Tribute Page

#img-div {
display: block;
text-align: center;
background-color: #fff;
padding: 25px 0 10px 0;
margin: 0 15px;
border-radius: 0.5%;
}
#image {
max-width: 100%;
height: auto;
margin-bottom: 15px;
border-radius: 2%;
}

What is wrong in my css?

Hey @aninotnanau!
Welcome to the Forum!

Can you please give a link to your project?

You host your project at CodePen

1 Like

@codely
https://codepen.io/antonina-naumliuk/pen/JjRaNad


Please verify your email to view in full mode.

You need to add @media for image.

1 Like

And now can you see?

1 Like

@aninotnanau, when a test fails click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)

1 Like

It sais I need display: block; but I already have it

Ok I will try with @media. Thanks! :slightly_smiling_face:

1 Like

A simple page such as yours does not require a media query. See my previous post.

It doesn’t work :frowning: :frowning:

So reading the entire message it says the img element should use the “display” style property with a value of “block”.

What you have is a div with an id of “img-div” using that value: property; pair.

Also, within your img element why are you setting margin-bottom: 15px;? Something like margin: auto; would be more condusive to centering wouldn’t it?

2 Likes

Now everything is alright! Thank’s, Roma! :+1: