Technical documentation page-media query help

[Hassan-Shakeri]

Hey everyone.
Can anyone help me with these 2 problems pls?

1- I would like to add a media query for smaller screens to turn the whole view in the column. but something obviously ruins everything!

2- Also when I maximize the screen, I get passed for all the tests but the problem is that when I make the screen smaller I get the test error as " 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 added the “position: fixed” to the navbar but again everything goes wrong!

Thanks in advance.

https://codepen.io/hassan-shakeri/pen/Vwmjgae

[bbsmooth]

@Hassan-Shakeri

I would like to add a media query for smaller screens to turn the whole view in the column. but something obviously ruins everything!

This is why it is almost always easier to style for a narrow view first and then add a break point for wider views. I would suggest you narrow your browser as far in as it will go and fix your CSS so everything works at that narrow width. Do not use any CSS break points. This will be your base CSS.

Then after you have this done you can widen the browser until you think you have enough room to shift to a two column layout and add your break point there (using min-width and em units).

@Hassan-Shakeri

Also when I maximize the screen, I get passed for all the tests but the problem is that when I make the screen smaller I get the test error

This is expected behavior for the tests. Look carefully at the last sentence of the error message:

“You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content”

In other words, you need to have your browser wide when you run the tests.

[Hassan-Shakeri]

thanks a lot, I’ll try to do the styling again and come back to report the result.

[Hassan-Shakeri]

I made the changes as you mentioned. everything is working beautifully. thank you so much.
there is only one new problem that I couldn’t figure out.
after saving my code in codepen.io and before doing any changes regarding the screen size issues, when I reopened my code, the "html { scroll-behaviour: smooth; } simply stoped working and it is not working anymore!
I would be thankful if you could give me any ideas what might be the reason!

[ieahleen]

@Hassan-Shakeri

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".

when it fails look at the error message below it

[bbsmooth]

@Hassan-Shakeri

the "html { scroll-behaviour: smooth; } simply stoped working and it is not working anymore!

This has to do with the way you are implementing scrolling for your right side content. The page itself isn’t scrolling but rather the .body-right div is scrolling. So you’ll need to set smooth scrolling on that div.

[Hassan-Shakeri]

thanks a lot!