Codepen links work on desktop & mobile inspector, but not mobile devices

Here’s the link to my Personal Portfolio Webpage:

The links in the contact section and header/footer work correctly on my desktop (I’ve checked it with Chrome’s inspector, both for large screen and mobile devices), but when I check it on my iPhone (6S, Safari and Chrome) the header links are unresponsive except for the hover effect and the footer and contact links just redirect to the top of the page. Does anyone know why? Has anyone encountered the same problem? I appreciate your input, thanks.

UPDATE: It appears to be an issue with Codepen /Codepen’s iframe. I just changed the view to Debug Mode and all the links work great. However, now my mobile view is displaying the large screen view…

Hello there!

I had a quick look both on my desktop (MacBook 13") and phone (iPhone 6) and it seems to be displaying the correct views (each of the gallery picture is full-width on my phone). Your media query in the CSS specifies a max-width of 870px—would it be possible that the mobile device that you were using is a tablet and has a screen width larger than that?

I think the nav bars are also working (nav-items are center-justified on my phone) correctly. The only issue is the last few lines of your CSS:

  #nav-bottom-links:nth-child(1) {
      margin-left: 0;

The :nth-child selector selects every element that is the nth child of its parent (reference), so the CSS above is effectively selecting all .nav-bottom-links.

There is also a typo at the beginning—nav-bottom-links appears to be a class but the CSS is selecting is as an id.

I think the following is what you want:

  #nav-bottom > .nav-item:first-of-type > a {
      margin-left: 0;

I hope that is somewhat helpful and what you want to fix! :slight_smile:

1 Like