Responsive Web Design - Product Landing Page - Layout test 1
1. The navbar should always be at the top of the viewport’ - can be passed AND not passed for the same code depending on the window size when the tests are run:
Run The Product Landing Page tests with a window height of at-least 800px : You should get 16/16 Tests Passed
Run The Product Landing Page tests with a window height less than 800px : You should get 15/16 Tests Passed
(I use a media query to change the size of the #video element at window height less than 800px)
Perhaps the test in question could also check if the #navbar position is fixed
rather than JUST if it appears at the top of the viewport in order to have consistent results
with the test.
I am unable to re-produce the above. As far as I can tell, the tests are working as expected (15/16), because the navbar is not fixed, nor at the top of the viewport.
I am not sure I understand the issue with your post, in any case. It does not help the navbar just being fixed…the idea behind the user story is to have the navbar always be at the top of the viewport. That is, with position: fixed; and top: 0; (or similar).
I can see you are using Safari as your browser. I suggest you use the latest stable release of Chrome for the freeCodeCamp curriculum, as this is the most likely browser to work as expected.
If you could clarify more, if I have not understood what you are referring to, then please do.
Change the code orientation to be on the left or right, not the top
Run the tests
You should then get 16/16
What I think happens is the navbar jumps into and out of the viewport as the window size changes (if you are using the left/right orientation on Codepen). I also think the navbar’s position is considered ‘fixed’ when you can view all the html elements without scrolling.
So the test passes even though my code uses neither position: fixed; nor top: 0;, unless you change the code orientation and/or the window size.
What are your thoughts?
Also, I was using chrome 83, you can confirm with the example gif.
Right. Thank you, for correcting about the browser.
However, the only way I can reproduce the above behaviour is by changing my zoom level to a point, as you mention, where the entire page content fits within the viewport.
Could you confirm if you have your browser zoom level set to that of anything but default? Also, do you have any browser extensions that interfere with anything (accessibility related extensions, maybe)?
Yea I was not on the default browser zoom level … Looks like the tests pass on anything 75% or lower. The only extension I have is a vpn called SetupVPN.
