Hi all
My technical documentation page for FCC passes all tests however the links only work within the media query which makes no sense. The same code works perfectly in a normal code editor.
Is there anyway to have FCC sort this out or explain it as it is bugging me. I would like to include the project in my portfolio project but how can I when it doesn’t function properly here. I don’t want to re do the code just to try & fit with FCC’s wierd behaviour.
I am trying to learn to code in the real world not the twilight zone.
I’m going to urge you to look real closely at the grid-template-areas you are defining. I think you will find that your spelling is incomplete.
Furthermore, I would urge you to withhold blame until you are sure that you know who the culprit is 
1 Like
Some funny things happening here. You can’t put position: fixed on a grid item. Once the navbar is fixed, it’s no grid item anymore. The second issue is that you’ve set the body to display:grid. In an FCC project, the test suite is a direct child of the body and therefore becomes a grid item (it actually takes the place that’s reserved for your navbar). An easy check for this is to add an event listener to the body and log out the click target.
Furthermore. the test suite has a z-index of 99999, so you can’t click on your nav anymore. If you set the z-index of your nav to something higher, it’ll become active again, but then you can’t click on the test suite anymore.
Long story short, you should be able to fix it just by adding a div right inside the body like this:
<body>
<div class="grid">
<nav></nav>
<main></main>
</div>
</body>
Then give all the grid styles to that div instead of the body.
2 Likes
This was my original solution too but then I looked real close at the spelling of the elements in the body grid-template-areas property and the fix is super easy.
I’m not sure what you mean, the spelling of “mai” as grid-area is consistent through the whole CSS. Did changing it to “main” fix anything?
Ahh, you’re right @jsdisco, I am mistaken. I apologize @Jaydog, don’t listen to my advice. The workaround is what @jsdisco suggested.
1 Like
I tried changing it to “main” and the funny thing is it does seem to fix things at first sight, because you just remove <main> from the grid. And since <nav> is fixed, it doesn’t interfere with <main>. Below 600px it breaks though.
Thanks bbsmooth & jsdisco for taking the time to explain . Some of that is beyond my understanding & I am still perplexed as to why the code works in notepad++ but I do appreciate your efforts.
I have decided to leave the tech doc page out of my portfolio page. Problem solved. I will concentrate on just passing the tests & not stress about functionality & aesthetics. After all I am not designing these for a company just for a piece of paper which I won’t even claim unless I manage to also complete the JS course which looks unlikely to be honest.
I suspect that the way you’re including the test suite in your local project is different, but without seeing your code it’s difficult to tell.
Don’t be discouraged if some things don’t make sense, you’ll understand all that if you just keep coding. And your actual developer portfolio won’t be hosted on codepen anyway and probably won’t include these first projects. They are just meant for learning, you’ll build much cooler stuff as you proceed.
2 Likes
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.