-
Posts
-
Hey,
I use the full-width-slider and has an issue on iPad and iPhone. Please see the screenshots. Domain and login details in private content.
Screenshot: https://imgur.com/a/vCrNe
I have added this CSS (instead of background-size:cover) but without success:
background-size: 100% 100%;Screenshot with result: https://imgur.com/a/SiuZ1
Any idea what is wrong?
Thanks,
MarcelHey Marcel,
To understand the problem, you are refering that the image is been cut, correct?
Best regards,
BasilisHi Joni Fleischer,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaHi,
The site looks fine on mobile view. Please note that the images in the slider are set as background and the background-size property is set to “cover” (https://www.w3schools.com/cssref/css3_pr_background-size.asp) which means that the image will cover the entire container. However, some parts of the image has to overflow outside the background positioning area in order to keep its aspect ratio. We can set the size property to 100% or “contain” but it will distort the images or create white spaces around the slider container.
If you really need the whole background image to be visible inside the container, create another slider then use images that are specifically resized for mobile view. Use the sliders’ Screen Options to toggle their visibility on different screen sizes.
Best regards,
IsmaelHi Ismael,
thanks for your answer. I think it depends to the link from “Joni Fleischer”. Can you please have a look to my .m-Domain website? I have posted the link as privat content in this post.
With Android the slider works fine. With Safari it does “stretch” the images (does not fit the window size). I have tested it with iPhone 7. Can you please check what goes wrong and how to fix it.
Thanks,
MarcelHi,
If you really need the whole background image to be visible inside the container, create another slider then use images that are specifically resized for mobile view. Use the sliders’ Screen Options to toggle their visibility on different screen sizes.
Please try the suggestion above.
@Joni Fleischer: Is it a retina device?
Best regards,
IsmaelHi Ismael,
the image sizes actually are 736×1024 (upright). So you would suggest two sliders controlled by screen options?
- First sliders screen options: Hide on all devices except of very small screens (smaller than 479px – eg: Smartphone Portrait) with images with max width of 479 pixel.
- Second sliders screen options:: Hide on all devices except of small screens (between 480px and 767px – eg: Tablet Portrait) with images with max width 767 pixel.
Is that what you mean? Why does the current slider works on Android and in Chrome developer tool (set to iPhone 6) perfect but for iPhone devices I need different sliders with different screen options and image sizes?
Hi,
Why does the current slider works on Android and in Chrome developer tool (set to iPhone 6) perfect but for iPhone devices I need different sliders with different screen options and image sizes?
Please review our previous explanation.
Please note that the images in the slider are set as background and the background-size property is set to “cover” (https://www.w3schools.com/cssref/css3_pr_background-size.asp) which means that the image will cover the entire container. However, some parts of the image has to overflow outside the background positioning area in order to keep its aspect ratio. We can set the size property to 100% or “contain” but it will distort the images or create white spaces around the slider container
You can replace the full screen slider with a full width easy slider on mobile view. This slider renders the actual image tag instead of setting the image as background.
Best regards,
IsmaelHi Ismael,
thanks, but unfortunately I still do not unterstand what the problem is :( The images are with 736 x 1063 px still perfect for the full-width-slider in mobile view. On normal pages it works great on iPhone. In popup-container it doesn’t work. So the problem must be the slider in the popup-container, or am I wrong? What should I change in CSS for the popup-container, that the slider images are cover the screen? If “the image will cover the entire container”, as you wrote, it means, this container is not width: 100% and height: 100%?
Addition: We use the same setup in the both links I added as private content.
First URL: Slider does not work with iPhone
Second URL: Slider works with iPhoneSame setup. The shortcodes for template are copy and pasted. Where is the difference between the both sliders in these both pages, when they copy and pasted and so exactly the same?
Hi,
The size and aspect ratio of the images make the difference. The images in the “mobile” site are tall, not wide, so it works well in mobile portrait mode. ( see private field )
Best regards,
IsmaelThat still doesn’t explain why the slider works on android tablet, and on an iPad it doesn’t?
Yes, the ipad is a retina device. as all of the apple products are?
Would really love a solution and not the solution I have te make 2 sliders with different viewports.
Because like i’ve already said: It works on a android tablet…I’VE FOUND THE PROBLEM!!!!!
You have to change the slider settings: Slideshow Image scrolling to Parralax!
Then the image looks the same on iOS and android!!!!
@Kriesi: Take a look at the problem, Image scrolling to Locked then the background is zoomed in on ipad and iphone. with parralax it’s normal againHi,
Yes, the ipad is a retina device. as all of the apple products are?
Not every iPad is retina. The images look blown out on retina devices because the device has higher dpi/ppi. Again, this is a matter of image sizes and aspect ratio.
Best regards,
IsmaelDIdn’t you read my last post?
I found the problem. Please take a look at the Slideshow Image scrolling.
It’s a fault by Kriesi. SO take it in account for a next update.@Mathuseo
No problem ;)
- You must be logged in to reply to this topic.