Home Forums Community Forum CSS for making Fusion Slider responsive

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • KabrosiDigital
    Participant
    Post count: 3

    I’ve just built a site for a friend and used Fusion Slider for the slider on the home page. It looks fantastic, however on mobile it is not responsive and the images are much too large for the device resulting in odd shaped images.

    In the past I was able to find CSS that others had used to resolve this, however it appears Avada have wiped their old forum responses and all of that valuable info is now gone 🙁

    Can anyone help me?
    Thx

    loewenkunst_
    Participant
    Post count: 9

    I’d like to know this, too. *push*

    Michael
    Keymaster
    Post count: 472

    Hi @kabrosidigital

    The Fusion Slider is 100% responsive and does not require CSS to make it responsive, this can be checked and confirmed by viewing this Avada demo using a Fusion Slider on any mobile device -> https://avada.theme-fusion.com/creative/ – if your slider is not responsive then something else is at play and needs to be rectified.

    Also, you have valid support, please create a ticket using the link below and our team will gladly check your install and settings and assist you.

    Click Here To Get Avada Support

    We look forward to helping you!

    Thank you kindly

    KabrosiDigital
    Participant
    Post count: 3

    This has always been a problem. Every time I build a new site and use Fusion Slider I have to add CSS to make the slider responsive.

    ESD112
    Participant
    Post count: 1

    Hi @Michael,

    I’ve noticed this same issue on many installs. Do you have a demo of the Fusion Slider (not full screen) that is assigned to the page via fusion page options? The slider is not sizing based on the content within no matter what I do.

    Thank you.

    marklchaves
    Participant
    Post count: 404

    I posted a detailed reply. But, when I edited 2-3 times for typos, the post was no longer being saved and not showing up. I’ve noticed this error/bug once before.

    I re-posted my reply on GitHub.

    https://gist.github.com/marklchaves/4369bce9bf2015cdb568bc455f6a4f11

    marklchaves
    Participant
    Post count: 404

    Repost.

    Hi @kabrosidigital and @esd112,

    Can you provide some visual examples? Responsive, has a few meanings out there (it’s an overused term). By default Avada is responsive. Meaning it will scale content appropriately (responsively) to different device screens and resolutions.

    You can see this clearly by viewing all Avada demos on multiple devices (alluding to Michael’s example).

    Avada is also responsive in terms that you can customise breakpoints & sensitivity via theme options. And, Avada supports site-wide and page-only custom CSS. Furthermore, Fusion Builder provides settings at the component level for selecting what device to display the component on. All this stuff is pretty cool BTW.

    So, asking something like, “Make Fusion Slider responsive”, or, “Make Avada responsive”, doesn’t make a lot of sense to me.

    Ok. Sorry for the long-winded intro. Let’s check-out some code. Below is a link to a live Avada Demo I created to answer recent forum post on this exact subject. I never heard back from the person who asked, but I noticed they implemented my design 😉 So, I’m guessing it worked for them.

    By the way, this is an example of Responsive Web Design to optimise Artistic Direction (image composition) for five different breakpoints (I might have gone a bit overboard on this lol–but it was fun).

    https://marklchaves.com/responsive-slider-demo/

    Here’s the link to the forum post the gives the background for this demo.

    https://theme-fusion.com/forums/topic/fusion-slider-100-of-picture-not-cutting-away-in-mobile-view/#post-633401

    Happy coding!

    P.s.

    Further Reading

    Excellent article that defines resolution switching versus art direction in responsive web design.

    https://cloudfour.com/thinks/responsive-images-101-definitions/

Viewing 7 posts - 1 through 7 (of 7 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.