Hi everyone,
I have a question about opening the codepen site on iphone / ipads.
I built this pen earlier http://codepen.io/kklgordon/pen/bgBwwp and it works completely fine on desktop (i.e. Navbar stayed at the top / Scrollspy is working / Can click on the navbar to go to different sections).
However, when i open the same page on my iphone or ipad. Nothing is working… Navbar doesnt stay top, scrollspy doesnt work and navbar links dont work neither.
Been trying to look it up on google and a lot of people say I have to add the tag with some viewport stuff. I tried but it still doesnt work.
Could anyone please help me a bit here?
Many thanks!
See the gear icon next to html? hit that and try putting your <head> stuff in there.
Thanks Mozar10 - I tried this too and it still doesn’t work.
This is what I included in the :
meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1”
In addition to that - I saved the code to a notepad and saved as html. Opened it using my IE or Chrome and the same problem exists. None of the navbar / scrollspy is working. I am guessing it has to do with the code?
1 Like
I deleted your j Query and bootstrap and body tags too. You don’t need any of that in code pen just write in the HTML space as if you are writing in the <body> tag. Click the gear icons on each view and they will allow you to include Bootstrap and j Query. Don’t include them anywhere else. Try that.
Does this work on your phone?
Thanks Mozar10. I tried the way in your first comment but it doesnt work. The link in your second comment does not work on iPhone neither. Works fine on PC though
hmm, I have an s6 and running chrome and it works perfectly responsively with you scroll-spy functioning. Not sure why it’s not working on Safari. But generally, you shouldn’t have any tags in the HTML section of codepen other than what would go inside the body tag.
Thanks man, appreciated! I guess if that’s the case it might not be a code issue then!
No problem. Works fine on my phone, and the scroll-spy on your first link does not work on my phone so deleting all the unnecessary tags did solve that.
I bet you could easily learn to write that scroll spy in jQuery though 
Haha most of the navbar and scrollspy was from the internet. I took bit and pieces here and there so thanks for telling me how to add them in the gear section!
Only just passed the first two projects in FCC I will see how far i go =)