Problem with Parallax across multiple Breakpoints

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

Problem with Parallax across multiple Breakpoints

Post by etcbbu » Wed Feb 14, 2018 3:37 pm

Hi all,

Trying to go live with a site that uses Parallax-Images on all of the pages, on their Default-960 Breakpoint. currently, every page also has a 320-Width Breakpoint, too. Looks great across, essentially all devices. But someone is telling me when they look at it on an iPad, the Parallax-Images are sort of blown-up/zoomed-in/blurry, and not displaying correctly.

But the thing is, I don't have Parallax-Image applied to any of the Layers on the 320-Mobile Breakpoint. On the 320-Mobile Breakpoint, all of the instances of Layer-Objects with 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

1) 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

2) 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?

The website it http://www.phenixlawfirm.com/test/index.php
I have tried testing it in several online-iPad simulators, both in "Portrait" and "Landscape" mode, but I am not seeing the blown-up, weird-loaded Parallax image like someone is telling me that they are seeing on their real-life iPad.

I really need to know how to approach this, so I know how to build my Parallax-Image websites, now, if this is happening with iPads. Any help would be appreciated.
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 13891
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Problem with Parallax across multiple Breakpoints

Post by Pablo » Wed Feb 14, 2018 4:30 pm

The Safari browsers of the iPad is known to have issues with parallax backgrounds.
Although I think the issue in this case is related to the aspect ratio of the image.

Note that you can select a different background mode in breakpoints, but I do not think that the 320 will be useful for the iPad.

Online iPad simulators are fake. They do not really simulate an iPad, they just crop the viewport.

User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

Re: Problem with Parallax across multiple Breakpoints

Post by etcbbu » Wed Feb 14, 2018 4:37 pm

When you say,

"I do not think that the 320 will be useful for the iPad."

What does that mean? I am not really sure on what to do, to fix this? My Layers in the 320-Breakpoint are already not set to being Parallax-Images, in my .WBS file, currently, but yet, the Browsers across iPads are seeming to either

1) loading the Parallax-images into the 320-Breakpoint layers

2) loading the Default 960-Breakpoint and then displaying the image in the layer incorrectly (like you said, aspect-ratio is wrong or something)

What can I do to workaround this for the iPad Browsers?

--etcbbu
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 13891
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Problem with Parallax across multiple Breakpoints

Post by Pablo » Wed Feb 14, 2018 5:00 pm

The first thing you will need to do if change the aspect ratio of the image.
For example to 1920x800, that works for me most of the time. But you may have to try different size to see what works best, because it also depends on the height of the layers.

In meant that the 320 breakpoint will be ignored by the iPad.

User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

Re: Problem with Parallax across multiple Breakpoints

Post by etcbbu » Wed Feb 14, 2018 5:18 pm

Do you mean just changing the height and width of the image, to, say,

Width - 1920 Pixels
Height - 800 Pixels

And loading the image into the Breakpoint that way?

What about the other option I recommended? If I built-out a third, 768-Breakpoint, and literally, just called the exact same objects that I use and are visible in the 320-Width Breakpoint, and just also use them and make them visible in the third, 768-Breakpoint, will the iPad browser (presumably Safari) load this 768-Breakpoint? Or will it still jump up and load the 960-Width Default Breakpoint?
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

Re: Problem with Parallax across multiple Breakpoints

Post by etcbbu » Wed Feb 14, 2018 5:20 pm

Or is changing the "aspect-ratio" something I do within properties or settings of WB, somewhere..?
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 13891
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Problem with Parallax across multiple Breakpoints

Post by Pablo » Wed Feb 14, 2018 5:27 pm

Do you mean just changing the height and width of the image, to, say,
Width - 1920 Pixels
Height - 800 Pixels
Yes
And loading the image into the Breakpoint that way?
In the default view.
What about the other option I recommended? If I built-out a third, 768-Breakpoint, and literally, just called the exact same objects that I use and are visible in the 320-Width Breakpoint,
yes, you can try that. Although I am not sure if the iPad will use this.
Or is changing the "aspect-ratio" something I do within properties or settings of WB, somewhere..?
No

User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

Re: Problem with Parallax across multiple Breakpoints

Post by etcbbu » Wed Feb 14, 2018 5:29 pm

If I do make the image

Width - 1920 Pixels
Height - 800 Pixels

Is it best that the Layer that will hold this image be sized to

Width - 960 Pixels (of course, to match the Default Breakpoint)
Height - 800 Pixels

?
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 13891
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Problem with Parallax across multiple Breakpoints

Post by Pablo » Wed Feb 14, 2018 5:40 pm

You will have to try to see what works best.
I suggest to first change the aspect ratio of the image and no other changes. Do one thing at a time.

The reason why I suggested this is because it works for me:
http://wysiwygwebbuilder.com/support/wb ... tures.html

User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

Re: Problem with Parallax across multiple Breakpoints

Post by etcbbu » Wed Feb 14, 2018 5:46 pm

Ok, at this time, I have made all of the Parallax background-images hanged over to just being "Cover" (so, I guess, that is "fixed", correct?)

Can someone, please, who has an iPad, go to these pages:

http://phenixlawfirm.com/test/index.php
http://phenixlawfirm.com/test/aboutus.php
http://phenixlawfirm.com/test/practiceareas.php

And tell me if the images images load ok and look ok? Or do they look zoomed-into and messed up? They are not Parallax anymore, but just fixed/set to "cover".
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 13891
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Problem with Parallax across multiple Breakpoints

Post by Pablo » Wed Feb 14, 2018 5:51 pm

'cover' is the same as 'parallax' . There is no difference in the way the browser will displays the image.
The only difference is the background position.

So, changing this will not fix the issue.

User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

Re: Problem with Parallax across multiple Breakpoints

Post by etcbbu » Wed Feb 14, 2018 6:26 pm

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?
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 13891
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Problem with Parallax across multiple Breakpoints

Post by Pablo » Wed Feb 14, 2018 7:03 pm

It still doesn't good for me.

But note that the filename is also invalid:
https://www.wysiwygwebbuilder.com/forum ... f=10&t=131

User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

Re: Problem with Parallax across multiple Breakpoints

Post by etcbbu » Wed Feb 14, 2018 7:29 pm

Ok, I am sorry, can you please go here and try these two pages again:

http://phenixlawfirm.com/test/index.php
http://phenixlawfirm.com/test/aboutus.php

? I removed out all of the images on my web-root "images" folder, and deleted out all of the old .php/.css and all other files, and republished the entire site.

I removed all of those hyphens from the various Layers' image files, and got rid of the numbers at the beginning of the filename. The filenames now only have letters and numbers, like, for example,

testingnewbreakpointindex13.JPG and testingnewbreakpointaboutus2.JPG

Can someone, please, who has an iPad and check this on an iPad tell me if the images images load ok and look ok? Or do they look zoomed-into and messed up?
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
etcbbu
 
 
Posts: 382
Joined: Mon Apr 23, 2007 3:00 pm

Re: Problem with Parallax across multiple Breakpoints

Post by etcbbu » Wed Feb 14, 2018 8:04 pm

All right, I have just now cleared out all old images in "images" folder on my web-space, and also cleared out all the .php/css/javascript, all pages. I obliterated it all, and re-published everything just now.

Could someone with an iPad, please visit on an iPad:

http://phenixlawfirm.com/test/index.php
http://phenixlawfirm.com/test/aboutus.php

Tell me if the "index.php" page Parallax layers are loading and look ok? Or do they look zoomed-into and messed up?

Tell me if the "aboutus.php" page is displaying the third 768-Breakpoint, and if it all looks ok?

--etcbbu
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

Post Reply

Who is online

Users browsing this forum: No registered users and 10 guests