Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 27, 2014 at 6:08 pm #215434
    loyalzoo

    I have been trying really hard to have an advanced slider that scales correctly on a mobile device, and I have read all sorts of threads on this forum, but couldn’t make it work.
    1) Text becomes too small on mobile, and gets unreadable
    2) Videos get stretched badly and are not useable; the frame is stretched in a very ugly way.

    See here: http://www.loyalzoo.com/customer-loyalty/

    Global settings are as per various other threads, so I don’t understand what I should do.

    Alternatively, could I eliminate the slider on small screens and just show up the text and video one under the other?

    Thanks.

    January 28, 2014 at 5:23 pm #215894
    Yigit

    Hey loyalzoo!

    You can add following code to Quick CSS in Enfold theme options under Styling tab to remove LayerSlider on mobile

    @media only screen and (max-width: 480px) { 
#layer_slider_1, #layer_slider_2 { display: none; }}

    Cheers!
    Yigit

    January 28, 2014 at 6:12 pm #215937
    loyalzoo

    Thanks, I’ll try this.
    But how can I show different content when I am on a mobile screen? I understand that using the method above I can have different sliders on mobile and desktop. However layersliders are just not responsive, text gets too small and videos have similar issues.
    How can I have the layer slider appear on desktop, but have different ALTERNATIVE content on mobile? By different content I mean a text box or similar, just not another layer slider.
    Many thanks for your help.

    January 28, 2014 at 9:23 pm #216052
    Devin

    Hi!

    That kind of functionality is just not available in either the plugin or the theme.

    You can use media queries to hide content on desktop and then show it on mobile and the opposite but it will still load into the page.

    Best regards,
    Devin

    January 28, 2014 at 11:52 pm #216091
    loyalzoo

    I have tried using this code as suggested.

    @media only screen and (max-width: 767px) { #layerslider_4 { display: none!important; } }

    This makes the whole content of the slider disappear on mobile screens, however it gets replaced by white space. I have seen other Enfold sites where the slider would just disappear under a certain size, but in my case it simply leaves white space of the same dimension as the slider, which really looks odd.
    How can I fix that?

    January 29, 2014 at 2:40 am #216197
    loyalzoo

    Ok, I have found the solution. The Content Slider, available in the advanced page editor, is PERFECTLY RESPONSIVE. Even videos can be added, and everything plays just perfect at any screen size.
    There are of course a few limitations coming with the Content Slider compared to the Advanced Layer Slider, however it offers high flexibility, and perfect responsiveness with text and videos.
    Thanks anyway for your help.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Responsiveness of advanced sliders’ is closed to new replies.