I'm having some trouble trying to get my Nav Bar to adjust correctly when viewing on mobile devices. When I go to inspect (IPhone 12 Pro) the "about" link in my nav bar goes to the next line. I'm not sure why it does this when there is plenty of space for it to be on the same line above.
I'm not sure if this can be fixed with CSS or if it has to be done via a media query? Any guidance would be appreciated as I'm currently a newbie to coding.
Link to my website https://jpark42.github.io/portfolio-website/index.html
Even though you should post your code into your question and not have links to external websites that make us chase your code, i will happily try to land some help.
To have your links aligned even on small screens, follow these steps:
align-items: center to .page-header. This will vertically align the Facebook logo image and the links..navigation-list (you can keep the rules that were already applied):display: flex; /** make the ".navigation-list" a flex container */
align-items: center; /** centers the links vertically */
justify-content: end; /** pushes the links to the far right */
flex-wrap: wrap; /** if the space is too small to display a link on the same line yhe browser will intelligently push the link(s) onto a next line */
margin: 0; /** removes the margins added by the browser (that should be done in a "reset" stylesheet) */
the above steps should bring you very close to your goal. To have better responsiveness, only the above rules won't suffice.
Learn more about
flexboxon MDN.