-
Posts
-
I have a fullscreen slider on the homepage of my site with 2 slides. Each image is positioned “Center Center”. Looks great on desktop, but on tablets and mobile devices the background images are wayyyy zoomed in. All I see on one slide on my phone and tablet is about a 1″ X 1″ section of wall somewhere in the photo (screen is all gray). The other slide is zoomed way in on the subjects eyeball. Is there a simple fix that I am missing or is this a bug that needs to be fixed on your end?
Here are my slider settings:
Slideshow Image Size: No Scaling (Original Width X Original Height)
Slideshow Image Scrolling: Fixed
Slideshow Transition: Slide sidewards
Autorotation active?: No
Slideshow Autorotation Duration: 5
Slideshow Control Styling: Default
Display a scroll down arrow: yes
Anyone? This is very time sensitive as in a few hours I have to launch this site from staging to production. Any input would be greatly appreciated.
Hi Parker,
Sorry for the late reply. This is the intended behavior, this slider does not have options to have responsive images. You can either try a different slider or choose different images that will have something in the middle, that you want to show to your customer.
Let us know if you have any more questions.
Best regards,
VictoriaIt is only non-responsive when the background is set to “fixed”. If it is on parallax or scroll then it resizes just fine. The image was so far zoomed in on mobile that I have a hard time believing that is intentional. It seems like a bug that needs to be fixed to me. I switched my site to just scroll the image background as a compromise since “fixed” doesn’t work and there isn’t an option to have “fixed” on desktop and “scroll” on mobile. Really defeats the purpose of even having the “fixed” background option.
Avada gives the option of “fixed on desktop, scroll on mobile” which seems to solve the problem of having fixed backgrounds on mobile.
Hi ParkerBolt,
I had exactly same issue on tablets and mobile phones, the only way I could solve this was bij making background images “scroll” on tablets and mobile devices. If this is an acceptable solution for you, you could try adding the code below to your child’s theme stylesheet or to the themes “Quick CSS” area.
I hope this helps.
Cheers, Nikolai
@media only screen and (max-width:1280px) {
.avia-fullscreen-slider .avia-slideshow[data-image_attachment=”fixed”]>ul>li {
background-attachment: scroll !important;
}
}Hi @ParkerBolt,
Did you try that solution out and are you ok with it? Thank you for sharing @Nikolai, much appreciated.
Best regards,
RikardFull Screen Slider, fixed alternative: Images are way zoomed in on iPhone.
When I choice parallax it works as expected.Hi @nikolai,
Thanks for the code. It works.
Others, please make sure when you copy the code, you use the proper double quotation characters around fixed.
Regards,
Hi,
Please note the the images in the slider are set as background and their background-size property is set to “cover” (https://www.w3schools.com/cssref/css3_pr_background-size.asp) which means that the background image will cover the whole container but certain parts of it, usually the edges, have to overflow outside the container in order to keep its aspect ratio. This is not great for images with a specific focal point. One workaround is to adjust the background-position property or add another slider (ex: full width easy slider) that contains images that are specifically resize for mobile screens.
// http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/
Best regards,
Ismael
- You must be logged in to reply to this topic.