Issue with Tribute Page : img not resizing

1

Hello,

Would anybody be kind enough to have a look at the code that is reachable via this link: https://codepen.io/edjbxl/pen/ZEWMGJY

Here is the issue: " The element should responsively resize, relative to the width of its parent element, without exceeding its original size."

I have read all the questions and answers here about the same issue a lot of people have had and unfortunately all changes that I have made haven’t solved it.
Any tips would be welcome.
I think that something should be changed at the level of the ID img but also at the level of its parent container. After changing almost everything I feel a bit lost and resourceless… :slight_smile:

Thank you for any kinds of support you will bring.

Kind regards,
Etienne, Brussels

2

Check out your line 126, there is a mistake with the quotations mark, there is an attribute that is inside the quotations.

Take a look at your code below:

      <img id="image" src="https://4.bp.blogspot.com/-bQdSusF5sJ8/W1AE79q61II/AAAAAAADOfk/f_e-BfbZS-QRcY749nbpYYrGKK0HyjwIwCLcBGAs/s1600/karen-carpenter.jpg" alt="3 pictures of Karen Carpenter smiling style=" width: 90%">
3

Hello @edj1040. When a test fails you can click on the red button to see what the test was looking for and how to fix it.
With this particular test, when you implement the first fix and run the test it may fail again but for a different reason. Implement the fix and test again.

You should also review this lesson to make an image responsive.

On a side note, try making doing all of your styling with external styling. No internal styling or inline styling.

4

Hello Roma, thank you for your answer and the tips. The issue is repeating and is about the responsiveness of the image. I keep searching for a solution. I reviewed the lesson as well. For the style I did it internally indeed and will take care in the future to prefer the external way. Kind regards. Etienne

5

Hello hlcostard, thank you for taking the time to reply. I have fixed what you had pointed out. Thank you for the check you did. Probably again a wrong copy-paste … For the issue itself about responsiveness of the image I keep getting the message from the Codepen tool and will still try to find a solution. Kind regards, Etienne

6

Troubleshooting is easier when you have external CSS which is why I suggested it.
In HTML you use <!-- to start a comment and --> to end a comment.
In CSS you use /* to start a comment and */ to end a comment.
Look at your comments in the style element and notice that they are not commented correctly.

Side note; don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.

7

Hello again. I followed your advice to separate html and css. Then I reviewed the comments which were as you said wrongly set here and there. Finally I only had to set a display: block; in the image div. And I was really happy to get the score of 10/10. I would like to thank you again for your advices and suggestions that I will follow as from now. Have a nice day/evening. Best regards. Etienne