I’ve tried to be minimalistic in my approach to solving the exercise but I have not passed the exercise. What is wrong?
you have removed the test suite it seems
how can you know if you passed or not
without the test suite?
Please, how do i post it here? I am new to coding!
you posted the freecodecamp pen, there there is the test suite. You need to include that script tag at the top of your html
if you fork the codepen given by freecodecamp do not remove the script tag, as that is the tests
Thanks for your patience! Below is the result:
I am confused about how to correct the error.
click on the button that says the tests you passed, scroll till the failing user story and look at the first line below that
I see just “Please run tests in a bigger window”, so I don’t know if there is something else
I’ve viewed it on my laptop and desktop. And the error message is:
" 1. On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content."
I increased the width of main-doc and media query but it is the same problem!
if it say so then your navbar is not fixed or if is not fixed in the right place
what does the first line below it say?
The line below it says:
“Left of bounding rectangle is not correct.: expected 0 to be below -951.5
AssertionError: Left of bounding rectangle is not correct.: expected 0 to be below -951.5”
AFAIK, the #navbar has the position-fixed.
I can’t check as I am on a too small device, but it seems it doesn’t like something of the dimensions you have used
The navbar does not scroll with the page on large devices because it is fixed. Still, I have the error!
I’ve done everything humanly possible to have the green button but no joy!
I still get an error message.
Lower the width on #navbar (to like 20%) and give it flex-direction: column. Also, remember that the page width has to be above some number (850px I believe) for the test to pass.
There was no need to open a new topic. You already asked about problems with this project less than 24 hours ago. It is better to keep questions about the same problems on one topic so that people trying to help can see what others have helped you with. 
I suggest that you follow every instruction of the project requirements very carefully and make a note as you complete each one. Try not to rush.
I’m sorry for my conduct. I felt exasperated after numerous attempts.
Thanks for your prompt answer and it worked! Missing in my code was the flex-direction and reducing the width from 100% to 20% like you suggested. I also increased the #main-doc to 850px.
Once again, thank you!
It’s not always easy learning new things, which is something I know all too well. When I get frustrated with code problems, I leave it for a few hours and then take a fresh look at it. Often projects do not pass because the instructions were not followed precisely. Read any error messages, which may show you what is missing in the code.
One thing that can help with layout problems is to apply different background colours or a border around all of the <div><nav><section>… elements so you can see what they are doing.
1 Like
Please do not create multiple topics for the same thing. I have merged your topics.
Had exactly the same problem. Had I not changed it in #navbar instead of .navbar it never would have passed. The coders should change the test to look at both implementations of the CSS. My navbar performed as it should. Thanks for the tip!!