Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 25, 2014 at 9:35 pm #283760
    cptnem0

    I have a very nice slider on my home page, but alas the images take too much time to load on mobile.

    I notice there is very nice feature in HTML5 video area to “not show on mobile device”. I was thinking it would be very nice to have for slider, or maybe have alternative where show slider 1 for desktop slider 2 for mobile etc.
    Any ideas?

    June 26, 2014 at 1:10 am #283832
    Ismael

    Hey cptnem0!

    You can add a unique selector for each Avia Elements. Edit functions.php, find this code:

    if(isset($avia_config['use_child_theme_functions_only'])) return;

    Below, add this code:

    add_theme_support('avia_template_builder_custom_css');

    Create two sliders, one for desktop and another for mobile. Give them unique css class selectors then create media queries to hide or display them accordingly. Something like this:

    @media only screen and (min-width: 990px) {
  #slider-one {
  display: block;
 }

 #slider-two {
  display: none;
 }
}

@media only screen and (max-width: 989px) {
 #slider-two {
  display: block;
 }

 #slider-one {
  display: none;
 }
}

    This will show slider-one on desktop and slider-two on mobile.

    Cheers!
    Ismael

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