[Help] Build a Tribute Page

[Bligidi]

Tell us what’s happening:
Hello,

I’m seeking help because I have many troubles with the adaptability part (exercise N°8). Even in the tutorial I understood nothing about it and don’t know how to make my image responsive according to the width of its parent element.

I would be grateful if you could help me out .
Your code so far
https://codepen.io/Bligidi/pen/oNYJRgK
Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

freeCodeCamp.org

[cherylm]

Hi there,

After you run the tests, if you click on the red button, you can read the entire error message. That will tell you how to fix it.

[jwilkins.oboe]

Hi @Bligidi !

Welcome to the forum!

These tests for the image trip a lot of people up.

In order to get a 10/10 here is what you need to do.

This is your current code for the image and you are getting 9/10.

#image {
  width:200px;
  max-width:100%;
  height:200px;
  border-color: grey;
    border-width: 6px;
    border-style: solid;
    border-radius: 50%;
  text-align:center;
}

Read the first error message and make that change.

When you do that you will now get 8/10. That is because it is still not responsive and it is no longer centered.

Read through the first error message and it will tell you how to make it responsive.

Now we are up to 9/10 again.

Then you will need to properly center the image.
If you google, how to center an image css then the first result will give you the answer.

Then you should see 10/10.

Hope that helps!

[Bligidi]

Indeed it worked, thank you both for your very clear explanations !