Avada Forums Community Forum Using Container Visibility settings

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • wvick
    Post count: 13

    Does anyone know how Container Visibility (Small Screen, Medium Screen, Large Screen) works? Is it CSS breakpoints?

    The reason for asking is that I’d like to slim down my website for mobile users. This includes changing a home page which has a hero banner with a chunky video, to a simpler image-based one.

    Can I just have two copies of my container… one (for Medium & Large Screen) with the video background, and the other (Small Screen) for an image background? Or, is this a false economy with all the media being loaded regardless. i.e.

    Do these Container Visibility settings just change visibility, or do they also impact which media is actually loaded?


    Ammar. S
    Post count: 2345

    Hello Warren

    The Visibility system works on CSS base so if you want to “not load” the content than you are better off with our “Rendering Options” which provides what you are looking for, what the visibility system will do is simply set the display to none for a specific media query (screen size) while the rendering option provides complete control instead.

    You can read more about the rendering options here => https://theme-fusion.com/documentation/avada/how-to/how-to-use-conditional-element-rendering-in-avada/

    Hope this will help you out 🙂

    Have a good weekend!


    Post count: 13

    Thanks for the quick answer, Ammar.

    Will the “Rendering Options” approach also need two containers (one mobile, one non-mobile)? I see it’s a sort of simple filter rather than able”if X use 1 else use 2″. If two containers are needed, is the detection of a mobile device reliable? I don’t want the wrong, or even both, containers (heros) to render!


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