-
Posts
-
Dear all,
I have recently purchased your theme. Great work, I am enthusiastic to have my website up and running.
However, the element Fullscreen Slider which I would like to use on my homepage, does not perform as expected on mobile devices (iPhone and also iPad). I t looks like the images are displayed at 100% or even bigger (zooming in). I see a lot of similar topics in the forum, but I am still not able to solve it. Some details of my settings:
Demo: Minimal Photography
Theme options / general layout: stretched layout (which I changed from fixed frame), max. container width: 4096 px
Element: Fullscreen slider:
– slideshow image size: no scaling
– slideshow image scrolling: fixed
– screen options: none
Image size: 2400px x 1200px
Please find under Private Content the link to another website where the slider works exactly how I would like it.
Thanks for your support which is much appreciated.
Kind regards,
MonikaHello Monika,
could you solve this problem already? I have the same issue with my website and this problem seems to be very common. On some websites I saw that the people could solve it but here in the forum all the CSS codes just don’t work. I would like to have the image on the mobile device (iphone X) like it is shown when I use the Easy slider. When I use the fullscreen slider the mobile view gets completely cut off on both sides and zoomed in. I tried all kind of CSS code which was posted here in the forum but none of it could show the image with the full horizontal size like if I would use the Easy slider. The best solution would be to use the Easy slider for the mobile view and the fullscreen for the desktop view but I don’t know how to do this.
Best regards
JCHi,
Thank you for your feedback. This is much appreciated.
No, I have not yet solved the problem. While waiting for a reply, I have not changed any settings in order to allow someone to analyse it based on the described status. Unfortunately, I have not yet received any advise from a moderator.
I have done quite some testing before writing the inquiry, i.e. I used various CSS codes and also your suggestion to combine the Fullscreen slider (for Desktop) and the Easy slider (for mobile devices). This works but it is not the optimal solution.
Interestingly, the Fullscreen slider as displayed on the Enfold 2017 demo, also does not work on my iPhone!
For your information: if you want to implement your suggestion, you have to include the two elements, i.e. Fullscreen Slider and Easy Slider on the respective page, just below each other. Then, in the “Screen Options” (second tab in the element) you have to define e.g.:
– in the Fullscreen Slider: hide on very small and small screens
– in the Easy Slider:hide on large / medium sized screens
Since my website is a photography website, the display of the images in either a slider or a lightbox is essential. So, I do not want to go for a second choice solution. I will further investigate and eventually contact a website owner (with Enfold theme) where the Fullscreen slider perfectly works.
However, in my opinion, this approach does not meet my expectation to a theme.
Good luck with your website.
Kind regards,
MonikaHi,
Thank you for using Enfold.
The images in the full screen slider have to be resized in order to retain their aspect ratio, which is why they look stretched or zoomed in on smaller screens. Those images are actually added as background and their background size property is set to “cover”, which forces the images to cover the entire container even if they have to stretch or overflow outside the background positioning area. Again, the property does this to retain the images’ aspect ratio. As suggested, you can add another slider in place of the current one for mobile view. Just make sure that the images are specifically resized for smaller screens. Now, if you’re wondering what size to use for mobile devices, try to follow the dimension of the standard screen resolutions used these days.
// https://mediag.com/blog/popular-screen-resolutions-designing-for-all/
There’s a lot of alternatives in the builder such as the Masonry, Gallery, Layer Slider etc. You can use the Screen Options to replace the full screen slider with another. We can also set the background size property to “contain” or “100%”, but it will distort the images or create gaps within the slider container.
Best regards,
IsmaelThank you Monika for your suggestion with the combination of the two sliders and Ismael for the information about the different sizes. I tried out different settings and it works for the desktop and mobile phone but not for the tablet. On my Ipad I would like to use the Easy slider. But the predefined settings don’t allow this as the screen ist too large. How can I change the settings so that also the Ipad in landscape orientation is beeing used by the Easy slider but at the same time the desktop is used with the Fullscreen slider? The current settings only allow the box to be checked for “wider than 990px”. I would need to change this value somehow.
Best regards
JCThank you Ismael for your help. Most likely, I will now go for the layer slider. As it looks, this element works.
Best regards,
MonikaHi Monika,
Glad you got it working for you and that we could help :)
Please, let us know if you need any more help.
Best regards,
VictoriaHello Victoria,
maybe you can help me. I am still not happy with the Easy slider and Fullscreen slider. The Eeasy slider only works well on smaller displays. The Fullscreen slider works only well on my desktop computer. The problem I have is that I cannot configure my tablet to be used with the Easy slider because of the size restrictions in the settings. How can I change those? Right now my Ipad is also using the Fullscreen slider settings because I need to activate the large setting for the desktop. The value is set to “wider than 990px” which unfortunately seems to include all Ipad screens.
Best regards
JCHi Jandabi,
Please start a separate thread, describe your issue there and give us a link to your website.
Best regards,
VictoriaHello,
If I can help someone, the Ismael option didn’t work for me, but this simple CSS worked fine in iphone X, without touching anything else:@media only screen and (max-width: 767px){
.avia-fullscreen-slider .avia-slideshow>ul>li {
background-size: auto 767px !important;
background-attachment: scroll !important;
}
}Hi arreguisergio,
Great, I’m glad that you found a solution and thanks for sharing :-)
Best regards,
RikardHi salvinono,
Please open a new thread and include a link to where we can see the problem you are having. Also please try to explain the problem a bit further as well.
I will close this thread for now.
Best regards,
Rikard
- The topic ‘Fullscreen slider on mobile devices’ is closed to new replies.