Carousel images load zoomed in on iPhone 11

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
Post Reply
Fredl
 
 
Posts: 134
Joined: Tue Feb 21, 2017 10:15 pm

Carousel images load zoomed in on iPhone 11

Post by Fredl »

Hello all, Happy holidays to WYSIWYG developers, mods and users! I'm working on the same site I've been posting questions about lately, www.portagratitude.com. There is a welcome carousel on the home page that loads fine on most devices, but on the business owner's iPhone 11 the carousel doesn't display correctly, the images are zoomed way in to where only a fraction is visible. I have reduced the image sizes to under 1440, which is the width of the 11 display, but that didn't fix the problem. In the "image size" setting of the carousel I have it set to "parallax" because I want the pic fixed and the content to scroll past it, is there another way to ensure that the whole image is visible on iPhone 11 or other high density screens? Thanks for any tips you may provide!
User avatar
Pablo
 
Posts: 22489
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Carousel images load zoomed in on iPhone 11

Post by Pablo »

The reason why it does not work is because the iPad does not support parallax (which is a combination of background fixed and cover).
What you can try is to hide the carousel for smaller breakpoints and use a different method to display the images.
Fredl
 
 
Posts: 134
Joined: Tue Feb 21, 2017 10:15 pm

Re: Carousel images load zoomed in on iPhone 11

Post by Fredl »

Thanks Pablo. I don't understand exactly, you suggest to hide the carousel in smaller breakpoint, but the iPhone 11 has a 1440 width resolution, which is the size of my biggest breakpoint, so how would hiding the carousel for a smaller one help?
User avatar
Pablo
 
Posts: 22489
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Carousel images load zoomed in on iPhone 11

Post by Pablo »

In that case, I think the only solution is not to use parallax for the carousel.
Fredl
 
 
Posts: 134
Joined: Tue Feb 21, 2017 10:15 pm

Re: Carousel images load zoomed in on iPhone 11

Post by Fredl »

OK, that's too bad, from what I've been reading Apple is the main reason developers should avoid using parallax for mobile devices. That's a shame, as it is a neat, modern effect. Is it possible to make a "mobile only" page in WB17 that would load when an iPhone or iPad load the page??
User avatar
Pablo
 
Posts: 22489
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Carousel images load zoomed in on iPhone 11

Post by Pablo »

Maybe you can use this extension?
https://wysiwygwebbuilder.com/pageredirect.html
alan_sh
 
 
Posts: 1754
Joined: Tue Jan 01, 2019 5:50 pm

Re: Carousel images load zoomed in on iPhone 11

Post by alan_sh »

Fredl wrote: Tue Dec 14, 2021 6:39 pm Thanks Pablo. I don't understand exactly, you suggest to hide the carousel in smaller breakpoint, but the iPhone 11 has a 1440 width resolution, which is the size of my biggest breakpoint, so how would hiding the carousel for a smaller one help?
On an iphone 11, run this https://whatismyviewport.com/ and see what it comes up with. You may be surprised.

Alan
Fredl
 
 
Posts: 134
Joined: Tue Feb 21, 2017 10:15 pm

Re: Carousel images load zoomed in on iPhone 11

Post by Fredl »

Thanks Alan, That was interesting and confusing at the same time. It returned 414 x 715 with a screen size of 414 x 896 and a DPR of 2.0 even though the display's resolution is 1792 x 828 (not sure where I got the 1440 number??) Not sure what I can do with this info, but it should help me figure out a way forward.
Last edited by Fredl on Tue Dec 14, 2021 8:56 pm, edited 1 time in total.
alan_sh
 
 
Posts: 1754
Joined: Tue Jan 01, 2019 5:50 pm

Re: Carousel images load zoomed in on iPhone 11

Post by alan_sh »

Those answers are what are presented to any browser. So, your images need to be that size.

Alan
Fredl
 
 
Posts: 134
Joined: Tue Feb 21, 2017 10:15 pm

Re: Carousel images load zoomed in on iPhone 11

Post by Fredl »

Wow, 414 is a pretty tiny image, odd that a device with such a high res display would only render such small images. I tried scaling one of the images in question and it made a pixelated mess. Since the density is 2.0 I'll try a 828 pixel wide one and see if that is acceptable.
Fredl
 
 
Posts: 134
Joined: Tue Feb 21, 2017 10:15 pm

Re: Carousel images load zoomed in on iPhone 11

Post by Fredl »

Pablo wrote: Tue Dec 14, 2021 7:08 pm Maybe you can use this extension?
https://wysiwygwebbuilder.com/pageredirect.html
I'll try it, thanks!
User avatar
crispy68
 
 
Posts: 2913
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Carousel images load zoomed in on iPhone 11

Post by crispy68 »

Is it possible to make a "mobile only" page in WB17 that would load when an iPhone or iPad load the page??
This would be waaaay more work than it's worth.

Why not just turn off the parallax effect for smaller screens? Based on your code, you could add some CSS code like such:

Code: Select all

<style>
@media screen and (max-width: 768px){
#welcome-carousel .frame-1, #welcome-carousel .frame-2, #welcome-carousel .frame-3 {background-attachment: scroll;}
}
</style>
Change the breakpoint to the width you want the parallax effect to stop. This removes the 'fixed' background that safari doesn't like and the slideshow will just scroll with the page using cover.
User avatar
Biju
 
 
Posts: 120
Joined: Thu Mar 10, 2016 7:02 pm
Location: Kerala, INDIA.

Re: Carousel images load zoomed in on iPhone 11

Post by Biju »

Hi Ron,
Please check your mail..
~ Remain Curious
and Keep Learning ~

_________________
visit my site
Post Reply