Technical Documentation Page HELP!

Here is my codepen

I am having a doozy of a time. Felt pretty good about the first three projects, but super stuck on this one. I think I’m overcomplicating it…

Problem 1: The test runner says I am not using a media query so I cannot fulfill all tests. The issue is, I believe I am… Unsure of why it’s not validating the media queries listed in my CSS.

Problem 2: All I want to do is make my menu change for the mobile viewer. I tried, unsuccessfully, for about 5 hours yesterday to teach myself how to make a hamburger menu so the navbar would be collapsable in mobile viewing, but I seriously can’t figure it out. At this point, my brain is jelly and I can’t even figure out what to do with the mobile navbar with or without a hamburger. Ugh.

Problem 3: Not really a coding issue, but are we just supposed to copy and paste the JavaScript info in the FCC example? That seems to be what everyone else has done, I just worry it will be looked at as cheating even if it’s just the HTML articles.

Thank you in advance, I am stumped.

  1. You seem to have fixed the media query issue.

  2. You can make it full width and fixed to the top of the page. I don’t think just hiding it is a very good solution.

  3. Do you mean the example code on the page inside the code elements? If you are recreating the example page then I guess you have to.

For test 3 and 4, it is looking for an <header> element, not a <h1>. If you wrap all the <h1> inside a header element it should pass.

  1. I keep thinking I’ve fixed it, but at least on my end the media query is not being validated by the tests.

  2. Thank you for the help, I was definitely over-complicating things…

  3. Yes, sorta. It’s the code as well as the actual text for the document. I just feel like I’m copying FCC and will get in trouble, even though all the examples I find have just copied and pasted the code/text.

Thank you for your help! I really appreciate the forum peeps.

Your project is passing all the tests for me now. Are you saying it is failing test 2 under the #Layout for you? What browser are you using? Maybe try clearing the cache and reloading the page.

For the page, you didn’t have to use the example project. You can pick any technical subject that would have a documentation page. It doesn’t even have to be about code. Although it makes a bit more sense if it is because of the requirement for using the code element. But that might also contain some math formula, dimensions for some physical “thing” etc.

It finally passed, whatever the problem was. I really appreciate your help!!