Tribute page passes all tests on codepen but fails on FCC

Hey everybody,

1st post here and 1st attempt at a coding project. I have finished my tribute page on code Pen and passed all the tests, yet when I paste the exact same code into FCC, it’s not being validated.

This is the msg in the console-

Your img element should have a display of block
Your #image should have a max-width of 100%
Your #image should be centred with its parent

link - https://codepen.io/KozoRozo/pen/KKRLYEw

Thank you in advance

K.

Did you correctly link the CSS? Code pen hides that step from you.

1 Like

Ah that could well be the case as I might not have linked it properly. Will check now!
Thank you so much Jeremy

1 Like

I have tried to paste the correct line of code in various places throughout the html page but still no luck!

you need to put it in the head element. Please show your updated code for help

Hi Ilene,

I do not have a head element anywhere in my code. Do I need this even though everything has passed?

Thank you

Yes, you need to correctly link the CSS to pass the tests, so you need to correctly follow all steps in order to do so.

Codepen hides this detail from you, but you need to do this step anywhere that is not codepen.

You need to style the html page, if you don’t link the css stylesheet, you are not styling the html page. The new curriculum can walk you through a real page structure, instead of the hidden implementation details of places like codepen

I have searched for this problem online, have referenced people who have finished the project on YouTube, and looked at the code for the example you have given for this project. Still can’t see any mention of head in anyones code anywhere, nor can I see the CSS linked in anyone else’s code. Very confusing

Will get back to searching…

Thank you for your help!

here’s a ref

(note this is also explained in the fCC curriculum but anyway, the link will give you the answer)

The sample project absolutely has the css in an external file…
If you inspect the sample project you can see that general structure

Did you try looking at the lesson on how to accomplish this exact task that I linked?

Thank you for your reply. I have added that exact code but still nothing!

I do apologise for being a headache over something that is surely simple and I’m just not seeing it.

no worries, here’s your code

<head>
<link rel="stylesheet" href="mystyle.css">
</head>

this code says that you have a file called mystyle.css and that it has your css code in it.

The question then is, is there a file called mystyle.css in fcc that has your code in it?
(think about it)

You need to use the actual file name in the freeCodeCamp editor - styles.css - which is shown in that lesson I linked.

Thank you hbar, ilenia and Jeremy for the help but unfortunately it is still not passing.

I have again followed and re-completed all tutorials etc, as suggested on this thread(w3, FCC- old and new curriculum ), repeatedly pasted the exact code that is displayed on the FCC note section at the bottom into a head element, playing around with it based on other lines of code I have seen examples of, and still the same 3 error messages regarding the img/image element.

Still going through other examples of tribute page code available on the internet and snipping bits of code to try and make it work but no joy.

What is the code you have now?

I am not sure if anyone asked already, but can you paste the link to the challenge you are trying to pass?