Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #757747

    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

    #758096

    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.

    #760557

    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,
    Victoria

    #760723

    It 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.

    #760727

    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;
    }
    }

    #761720

    Hi @parkerbolt,

    Did you try that solution out and are you ok with it? Thank you for sharing @nikolai, much appreciated.

    Best regards,
    Rikard

    #766573

    The CSS-solution doesn’t work for me. Only Parallax! Gah!

    #766841

    Hi @roine,

    Could you try to describe your problems a bit further please?

    Best regards,
    Rikard

    #766870

    Full Screen Slider, fixed alternative: Images are way zoomed in on iPhone.
    When I choice parallax it works as expected.

    #766898

    Same with Color section: Section Background, Background attachment = too much zoomed in

    #767858

    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,

    #767947

    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/ (Purchase code hidden if logged out) /

    Best regards,
    Ismael

    #767958

    Thanks @tameez

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.