Responsive Advanced Layerslider

Hi,

Could you post links to where we can see your problems?

Best regards,
Rikard

Hi GraphicEyeDK,

Dette er lidt pinligt, er det ikke?

I get a 404 error on that page.

Best regards,
Rikard

Hi,
Sorry for the late reply, the best solution, in this case, is to create a second slider for mobile devices. You can clone your desktop version and then adjust the canvas size to match mobile, that is to make it taller than wide 425px x 168px or how ever tall you wish it to be.

Then you can make your text and buttons larger and align them on the page as you like.
Then you can use css to hide and show the two sliders depending on the screen size, for example:

@media only screen and (min-width: 768px) {
    #layerslider-1 {
        display: block !important;
    }
    #layerslider-2 {
    display: none !important;
    }
}
@media only screen and (max-width: 767px) {
    #layerslider-2 {
        display: block !important;
    }
    #layerslider-1 {
    display: none !important;
    }
}

If you would like help with the css please create the slider and include admin login in the Private Content area so we can examine the sectors and write the css.

Best regards,
Mike

Hi,
I recommend using the auto-generated slider ID’s, for example, the slider that is on your front page now is “#layer_slider_1” so if you add another one to the page it should be “#layer_slider_2”
I understand that your site is live and you won’t want it to look too odd for very long, so I recommend creating your second slider and then add an admin login in the Private Content area, I will add it to your front page and add the css and test for you, if you wish.
Or you could try adding the second slider and try this css code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (min-width: 501px) {
#layer_slider_1 {
display: block !important;
}
#layer_slider_2 {
display: none !important;
}
}
@media only screen and (max-width: 500px) {
#layer_slider_2 {
display: block !important;
}
#layer_slider_1 {
display: none !important;
}
}

I tested this on my localhost and it works correctly using the auto generated ID’s, but you will want to remove the other css added from the above posts.
Then clear your browser cache and check.

Best regards,
Mike