Page 1 of 1
Can someone please check this on an iPad/Safari?
Posted: Wed Feb 14, 2018 5:32 am
by etcbbu
Hello,
Could someone please check out this potential new website I'm wanting to publish live soon, and please look at it on an iPad, on Safari, both in Landscape and in Portrait mode:
http://www.phenixlawfirm.com/test/index.php
I've got someone saying it "Doesn't look right". I can't test it, I don't have an iPad. What is going on with it? It *is* a Parallax website. Are the Parallax Layers' images not loading, or something..?
--etcbbu
Re: Can someone please check this on an iPad/Safari?
Posted: Wed Feb 14, 2018 1:44 pm
by Rob
Here is a nifty tool you can use -
http://quirktools.com/screenfly/. Not an exact science but pretty ok. I'll let you see for yourself what some may be saying. If possible, I'd possible do away with the paralax on mobile devices only but keep on desktop. If the layer you are using is set to image background / paralax, simply change to cover in the smaller breakpoints.
Re: Can someone please check this on an iPad/Safari?
Posted: Wed Feb 14, 2018 3:13 pm
by etcbbu
@Rob - Thank you, sir. I actually ran it into several online-iPad simulators last night, and I tried in both "Portrait" and "Landscape" mode, and none of them are showing what this person says it is doing on their iPad when they look at it. But I believe them. I've seen how Parallax has done this before.
But the thing is, I don't have parallax applied on the 320-Mobile Breakpoint. On the 320-Mobile Breakpoint, all of the instances of Layer-Objects wi th Images' being set to Parallax are not set to have Images on the 320-Mobile Breakpoint; those same Layers that are Parallax-Image on the default 960-Desktop Breakpoint I just change to a static, solid *color*, on the 320-Mobile Breakpoint. So I mean, I am not even using Parallax images in the 320-Mobile Breakpoint anymore. It is the *same* Layer objects that are set to "Image - Parallax" in the Default-960 Breakpoint, so, yes, it is the same Layer objects that have the Parallax-Images in the Default-960 Breakpoint; but when they are visible in the 320-Mobile Breakpoint, those some Layer objects are just changed to a solid-color background.
How can I fix this...? Do I need to totally hide the Parallax-Image layers in the 320-Breakpoint, completely, and just bring in new Layer objects in the 320-Pixel Width Breakpoint that are just the solid color? (And then hide *those* in the default-960 Breakpoint?)
Or, if I just make a third, 768-Breakpoint, and literally just "Make Visible" all of the same objects as the 320-Mobile Breakpoint, and "Make Invisible" all of the same objects from the 960-Default Breakpoint, would that work? Essentially, I'd have a third Breakpoint, but it would, literally, just be a mimic of the 320-Mobile Breakpoint?
Re: Can someone please check this on an iPad/Safari?
Posted: Wed Feb 14, 2018 5:24 pm
by Rob
So if I understand you correctly, 960 is your default breakpoint at it's widest - which happens to fit on an ipad horizontal. Ok. In this case....
Concerning breakpoints, I have the following: 1900 dt, 1260 dt, 1024 ipad, 768 ipad, 480 iPhone, 320 iPhone. Could be considered overkill but I am hoping not.
I am wondering if at a minimum you should have 1 breakpoint for each device container 1 for desktop, 1 for ipad, 1 for iPhone. In which case I'd add a 1260 breakpoint as default, make the layer there parallax if you wish, then in the other 2 set it no cover. Just my initial thoughts.
Rob
Re: Can someone please check this on an iPad/Safari?
Posted: Wed Feb 14, 2018 6:26 pm
by etcbbu
Ok, so for two images, at this time, I have changed the Image-dimensions on the two raw images to be
Width - 1920 Pixels
Height - 400 Pixels
And then on the two Layers on the page, I have set the Layer-size to be
Width - 970 Pixels
Height - 400 Pixels
Can someone, please, who has an iPad, go to this one page:
http://phenixlawfirm.com/test/index.php
And tell me if the images images load ok and look ok? Or do they look zoomed-into and messed up?