My page looks like crap on my ios devices!

So I’ve been spending a lot of time revamping my portfolio page, and I’m almost at a point where I’m quite satisfied with it.

I’ve tested it in the major browsers (both pc and imac) and my android phone and the site looks exactly as intended on them.

Then I tried looking at it on my ipad3 and old iPhone 4… it looks atrocious. The background image doesn’t load, and everything is askew. I’d guess bootstrap and/or flexbox aren’t working with it.

Is this just because they are older devices and don’t support this stuff? Is there a fix? My page is http://ddryburugh.com

Hey Doug,

The first thing I can see missing is this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

More info can be found at https://www.w3schools.com/css/css_rwd_viewport.asp

Good catch, I’ve added that in and it’s helped the page scale appropriately for smaller devices. I’m still dealing with the original issues however.

I made a quick port to codepen so it’s easier to look at my code. http://codepen.io/doug20000/full/wJxLXN/

Did you fix it yourself? I just opened up the page on my iphone and it looks fine…

I did notice however that your menu does not want to collapse once you open it.

edit: nevermind I see what you are getting at, the original image isn’t loading…One thing that might be worth a shot is saving the background image and hosting it from your own url like you have with the rest of the images that are still working. Maybe iOS has some issue with https vs http or something.

Well that looks slightly better than my iPhone, I suppose it’s progress! What model is your phone just for reference?

It’s an apple iPhone 5

A post was split to a new topic: Entry level pay in web development