Need Help with ‘Build a Technical Documentation Project’?

I’ve been working through the first certificate on FCC but I’m stuck on the fourth project.

“User Story #14: On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left side of the screen and should always be visible to the user.”

According to the example, the Navbar is at the top of a small screen, or on the left side of a big screen.

I’m kind of fuzzy on the code, but I believe:
#main-doc sets up 2 columns & 2 rows with CSS Grid, to make the navigation horizontal. Using the Media Query for a smaller window, it’s supposed to change it to 2 columns & 3 rows, to make the navigation vertical.

I’ve been testing this by resizing the window (not sure if that’s the best way…?). When I paste the code into a FCC lesson it seems to work. But when I used the Code Pen app it seems to be stuck.

I’ve also set the background to red and cyan respectively, but it seems to be stuck on cyan. (That’s the Media section.)

Any idea what I’ve done wrong?

  1. I can’t see for myself the tests because you haven’t uploaded test suite to codepen. But a helpful tip would be look at the error log it generates. There’s some details on why you didn’t pass certain tests.

  2. Can you further explain setting the background to red and cyan respectively? What behavior are you expecting? where is your line of code that attempts it?

1 Like

Thank you for your response. As you can probably tell, I’m new to CodePen so please bear with me.

1: I put a script for the bundle.js into my project. This is the Test Suite? (It’s very helpful, I didn’t know about it before.)

2: I ran the Test Suite. At first it was giving me 1 Tests Executing, but when I disabled Adblock now it’s showing All Tests Passed.

3: The red and cyan background was for my benefit, just so it’s easy to visualize whether the media tag was being used or not. (Red=Small window. Cyan=Large window.)

-Lines 10 through 20 are how #Main-Doc should appear in a smaller window. The Navigation should be horizontal and the Content underneath it. (I feel this isn’t working, because when I resize the window nothing changes.)

-Lines 23 through 31 are how @Media #Main-Doc should appear when the window is at least 300px. The Navigation should be vertical, and the Content to the right. (This works.)

Great. Yes, that is the test suite and you are passing all the tests for this challenge.

It is working for me though. If you make your screen less than 300px width. The background will become red.

I also suggest you checkout this article on best practices to make a webpage responsive.