Avada Forums Community Forum CSS for making Fusion Slider responsive

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • KabrosiDigital
    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?

    Post count: 10

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

    Post count: 715

    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

    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.

    Post count: 3

    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.

    Post count: 873

    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.


    Post count: 873


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


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


    Happy coding!


    Further Reading

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


Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.