Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 29, 2014 at 3:11 pm #372579
    tonyiatridis

    Hi,

    My client is concerned that the homepage layerslider loads slowly on older mobile devices.

    On another site where I use the revolution slider I had a similar issue and tried this:

    CSS:
    #mobileversionhome {display:none; margin:0, padding:0}
    /*layouts smaller than 600px, iPhone and mobiles*/
    @media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {
    #mobileversionhome {display:block !important;}

    On Page:

    <div id=”mobileversionhome”>
    [rev_slider mobilehome]
    </div>
    <div id=”ScreenVersion”>
    [rev_slider_vc alias=”home-page”]
    </div>

    I’m still tinkering with the #ScreenVersion div so the larger slider doesn’t appear on a desktop when the browser is made less wide than 600px. If you have any ideas there that would be helpful as well).

    So my questions are, one, can I implement the layerslider with a shortcode in a codeblock module on the home page with Enfold, and two, would this approach work with this theme?

    Thanks

    Tony

    December 29, 2014 at 4:16 pm #372616
    Yigit

    Hi tonyiatridis!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 600px) {
.home div#layer_slider_1 {
display: none !important;
}}

    Cheers!
    Yigit

    December 29, 2014 at 5:16 pm #372654
    tonyiatridis

    Hey Yigit,

    At work at the moment I’ll fiddle with this soon, however. That code will remove the slider on the mobile device how would I then implement the smaller low res version of the same there? As I recall the theme uses a module to place the slider. Can the slider be placed with a shortcode somehow in a codeblock?

    Thanks,
    Tony

    December 29, 2014 at 5:35 pm #372671
    Yigit

    Hey!

    Yes, you can add shortcode into a Code Block element. Also you can add another Advanced LayerSlider element to your page and hide it on desktops. Please let us know when you add second layerslider so we can provide you custom CSS for hiding it too

    Cheers!
    Yigit

    January 2, 2015 at 10:34 pm #374276
    tonyiatridis
    This reply has been marked as private.
    January 4, 2015 at 4:32 am #374615
    Andy

    Hey!

    try with this in Quick CSS:

    @media only screen and (max-width: 600px) {
div#layerslider_25 {
display: none;
}}
@media only screen and (min-width: 600px) {
div#layerslider_26 {
display: none;
}}

    Cheers!
    Andy

    January 5, 2015 at 8:00 pm #375282
    tonyiatridis

    Hey Andy,

    That works great but it still has a small issue I was trying to get rid of, if you make the desktop version very narrow in the browser both sliders appear. Not that many people would ever do this, but this client does that to simulate the mobile version on his desktop as he has no smart phone himself. That’s the part I could never figure out.

    Tony

    January 7, 2015 at 6:02 pm #376292
    Elliott

    Hey!

    Try this.

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

    I’m not sure if that’s the one your wanting to hide. If it’s not then switch the 26 to 25.

    Cheers!
    Elliott

    January 7, 2015 at 7:21 pm #376339
    tonyiatridis

    Thank you Elliot I see what I was doing wrong now, you saved me a lot of time and educated me I am greatly in your debt, pal. I’ve decided to redo my personal portfolio web site with the theme as well so you just made another sale. :) You guys are the best.

    Tony

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Alt version of layer slider slideshow for slower 3g mobile devices’ is closed to new replies.