Reply to this thread that is not letting me re-post my edited response.
https://theme-fusion.com/forums/topic/css-for-making-fusion-slider-responsive/
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).
Edited 20 October 2019. I removed all my Fusion Sliders from my site recently to reduce JS bloat. So, I had to rewrite this demo example using a background image. The RWD concepts still apply. The implementation just doesn't use a proprietary slider anymore.
https://marklchaves.com/responsive-banner-hero-image-demo/
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.
https://cloudfour.com/thinks/responsive-images-101-definitions/