Help with media query for the 4th HTML project

HTML-CSS
1

Hey!

I’m still fairly new to the @media query in CSS. However, it seemed to have worked so far.
I’ve encountered an issue with my latest project (technical documentation page).

@media  screen and (min-width: 560px) {}

works in my computer browser (Chrome on Windows) - when I resize it, it changes the layout appropriately (namely, the navbar switches from being on the left hand side, to being on the top of the document).

HOWEVER!
When I open the same page on my mobile phone, in Github pages, it looks like the “regular”, “desktop” version, and I haven’t a clue as to why it won’t change.
But when I open the codepen on my phone’s browser, it looks like it should, but the links aren’t clickable.

Am I missing something here? I must be. Should it not look the same on both github and codepen? Would anyone happen to know why my links don’t work in codepen, but work in github? I’m so lost.

Thank you in advance. (Also, don’t mind the content of the site, please)

edit: just realised I haven’t linked to my site.

https://codepen.io/minim_l/pen/oROQbq

https://ivahub.github.io/fcc-project-4/

2

Give the browser a little help by putting this in the head of your html:
<meta name="viewport" content="width=device-width, initial-scale=1">

1 Like
3

Thank you so much, for giving me (and my browsers) a tonne of help. This did the trick.

I still don’t know why my links won’t work in the codepen mobile site, but my page finally behaves the way it should on github.

Have a great day!