I completed the Personal Portfolio Project and passed all the tests. I want some help to fix a small glitch with regard to the responsiveness. On smaller phone screen sizes, the first navigation link “About Me” is either partly visible or hidden. When I shrink the browser window to the smallest size it looks okay, but when I use the browser Developer Inspector Tool to view different phone screen sizes, it is hardly visible on smaller phone screen sizes. I tried to fix this with flex properties, reduced margin, padding as well as font size, but it is not making any difference. If anyone can help me fix this, that will be of great help. Here is the link to my glitch page - Glitch :･ﾟ✧
I viewed your site outside of developer tools fullscreen and its fine. I assume you have developer tools on the bottom which takes up part of the window and forces your page too high.
Thanks for your reply. Yes, for both of us, if we view the page outside the developer tools, it looks fine. I tried to move the Developer Tools from the bottom to the right side and it still looks the same. The About Me navigation element on the right side is either hidden or not showing up at all. I used different phone sizes in the Developer Tools and this is what it shows. I have attached a screenshot of the Developer Tools window showing the page in one of the phone sizes. In the screenshot, the navigation only shows Projects and Contact and the About Me on the left is not showing.
So for that phone size you display it vertically, but show a hamburger icon or utf8 heaven character then after click slide the vertical menu on screen.
Sorry, I could not understand what you are saying. Clicking the hamburger icon does not seem to show the hidden navigation element. The hamburger icon or the UTF8 heaven character is the FreeCodeCamp’s JavaScript code which runs the tests and tells you whether you pass the test or not. I left there as it as it is even though I passed the tests. I even tried changing the hamburger script tag to a comment tag so that it does not appear but it does not help.
You need an additional one for your own menu. I recommend the upper right corner for use on freecodecamp so it doesn’t interfere with theirs.
Your link is hidden because of the margin-right of the .nav-link, it’s just too big for that screen size.
Thanks for your reply. I tried that. I reduced margin-right of nav-link from 0.75em to 0.25em or even 0.15em but it does not make any difference.
Not sure why it’s not working for you, but when I remove the margin, I get this result:
Yay! Yes I removed the margin-right on the nav-link property and it works. Thank you very much.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.