I have problem with responsive image of Tribute Page

Curriculum Help
,
1

#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?

2

Hey @aninotnanau!
Welcome to the Forum!

Can you please give a link to your project?

You host your project at CodePen

3

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

4

image
image1280×1024 87.5 KB

Please verify your email to view in full mode.

5

You need to add @media for image.

6

And now can you see?

7

@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.)

8

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

9

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

10

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

11

Error1
Error11234×536 196 KB

12

It doesn’t work :frowning: :frowning:

13

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?

14

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