Portfolio Website doesn't work on iPhone

1

hey, so I have a near completed portfolio that works well on everything, mobile or desktop, except for on iPhones specifically. It seems to be a CSS issue but I’m not sure what’s going on, and unfortunately I don’t have an iPhone to do any testing. Any help would be appreciated! Project: https://codepen.io/MarcelPenn/pen/agxXeR

2

How do you know without an actual iPhone? Developer tools? Not accurate. Developer Tools only give you the screen size to check responsiveness. Codepen says that they aren’t compatible with ios10 safari browser, but sometimes I get lucky. Still I’d only trust it 100% on a real site.

The biggest thing I see is that you’re stretching your images. Review the lessons on scaling images.

There is an extra closing li tag

There are divs with the class of column but also duplicate ids of col. Why?

Footer isn’t properly closed

Copyright named character needs to be closed with a ;

Make sure to put a space between attributes

3

I had a friend check it out on his phone and he’s the one who let me know. Yeah it’s the images that are the issue apparently iOS doesn’t like some of the css background attributes but I haven’t found a solution. But perhaps it’s a code pen issue like you said so I’ll look into that.

I’m not sure why I have both class and id for “col”, Was just looking at it and I don’t even have CSS for .col so I’ll clean that up, thanks. I’ll fix those little issues as well, thanks for the feedback!

4

It depends on the ios version and browser. Codepen only supports the last two major revisions so I’m out until I upgrade. What browser did he use? ios Chrome is Safari under the hood. The alternative is Firefox.

Check caniuse.com after you find out his version numbers.

The images are stretched because of the assigned dimensions. I saw that on my big screen.

Fix the errors I mentioned

If there is still a problem after all this, then try hosting in a free account at:

  • github pages

  • Netlify

  • or Neocities

and then I can check on my phone.

5

I’ll check with him tomorrow and try and a few things. I’ll be able to get it up on his hosting then so I’ll look into some of the things you mentioned. Thanks!