Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Response to, "CSS for making Fusion Slider responsive"

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.

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

Happy coding!

@marklchaves

This comment has been minimized.

Copy link
Owner Author

marklchaves commented Aug 14, 2019

Further Reading

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

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

@marklchaves

This comment has been minimized.

Copy link
Owner Author

marklchaves commented Mar 7, 2020

I've migrated marklchaves.com to caughtmyeye.dev.

I've also published a comprehensive RWD article on the DEV community.

Enjoy!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.