Portfolio: Question about background-attachment: fixed on iThingys

Portfolio: Question about background-attachment: fixed on iThingys
0

#1

Hello,

Here is my second crack at my portfolio page. I finally discovered responsiveness :grinning:, so I went back to my portfolio to tweak it. I have figured out how to make it look decent on android telephones and a little 10" windows computer (haven’t looked on a desktop yet). The big frustration for me right now is what’s the deal with the iPad Pro 9.7? I cannot get the background image to change, move, resize, or anything. Is there something special I have to do to get my design to look good on the iThingy’s?

Thanks for your help!


#2

Assuming it’s not broken in Safari, I imagine it looks something like this right?

I’m curious what the background image is doing on the ipad.


#3

I don’t have an iPad Pro with me to test it right now, but could it be because of the Retina display?
iPad 1 & 2 were 1024 px x 768 px
iPad 3 & 4 are 2048 px x 1536 px
… even though all versions are 9.7 inches.

Or do you need to add the ‘main’ class to the same div as ‘container-fluid’. Currently it’s on the div that surrounds the fluid container. Could that be causing the problem?

It’s hard to picture what’s currently going wrong on the iPad pro, like cjsheets said. I checked your site on responsivetest.net and it seems fine in the iPad views, it’s the iPhone where things aren’t responsive
http://responsivetest.net/#u=http://codepen.io/kymburley/full/rrvxvv/|

cheers,
Ali


#4

Make sure you have the viewport meta tag added to the head. If you’re using CodePen, in the settings for HTML, there is a button at the bottom to add the viewport meta tag.


#5

What was happening was only on iDevices. The background-image was being zoomed, which was causing a legibility conflict with the white font.

It turns out having background-attachment: fixed was causing the problem. I have removed that and now it looks the same on all my devices except the Sucky Samsung S5 where the background is white without an image (another legibility conflict since the font is white).

I would like to understand how to have the background image scroll on all devices except iThingy’s, or even on iThingy’s without the image being zoomed.