Hey guys and gal’s!
So, i don’t understand something.
When i open on mobile the Technical Documentation page sample provided by FCC here it displays correctly - screen fits, navbar element on the left side.
Now, regarding my version here on mobile the navbar element sits on top of the #main-doc and doesn’t display properly.
Github repo for my version is here
I have looked carefully at the CSS styling in the sample from the FCC, but can’t figure out why the @media queries on my project are not working as expected, while on the sample project they are.
Could someone please clarify?
I’m not seeing the issue when I look at your page with a narrow browser. Can you be a little more specific about what is not working?
2 Likes
So if you checkout this image, you will see the navbar is on the left side and entire page is in view (no scrollbar)
Now on my page, the navbar is on top and overflowing into the main-doc element.
To see this, adjust width <815px in the inspect browser feature. The @media query is causing this, but if i remove the media queries then the scroll bars appear and the entire page is not un full view on mobile devices.
Ahh, I see, I didn’t narrow the browser enough. It’s happening when the header text (GiggleByte Documentation) has to wrap to two lines. When it does that it is pushing nav list menu down over the content below.
I see you are using a lot of relative and absolute positioning. I would get rid of that and use something like flexbox instead.
1 Like
