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

CodePudding user response：

Even though its on 310px width (no phone has that width), you should readjust your margins and paddings. For example on ul element you should readjust padding:40px to padding:0, margins of li elements too. Your screen size is smaller, but margins and paddings are staying same. They are not so friendly to new people.

CodePudding user response：

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:

1. apply align-items: center to .page-header. This will vertically align the Facebook logo image and the links.
2. apply those rules to .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 flexbox on MDN.