[ursaminorParticipant]

Greetings,

I am having difficulty making LayerSlider display correctly for mobile and tablet screen size.

I managed to make desktop layout look just how I want: http://bit.ly/2315OXQ
So everything is great for desktop screen size.

The problem I am having is for tablet and mobile layout, the image resizes but I need it to resize AND to crop based on a “minimum height” or equivalent. I tried everything I could think of in the settings adjustments, but here is what it looks like for mobile screen size: http://bit.ly/2316igB

This is the way I WANT it to look at mobile screen size: http://bit.ly/2316rR1

Can you please help me achieve the desired result?

Thank you kindly,
Benjamin

[ChristopherModerator]

Hi there,

I would like to check your site but it’s nuder construction mode, please provide us login credentials.

Thanks.

[ursaminorParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (max-width:480px){
.ls-l {
    top: 72% !important;
}
p.ls-l {
    top: 49% !important;
    font-size: 18px !important;
}
.ls-inner, div#layerslider_1, .ls-slide.ls-slide-1.ls-animating, img.ls-bg {
    height: 493px !important;
}
h1.ls-l {
    top: 45% !important;
}
}

Hope it helps.

[ursaminorParticipant]

This reply has been marked as private.

[JadeModerator]

Hi Benjamin,

Please try to update the previous code to:

@media (max-width:480px) {
    .ls-l {
        top: 72% !important;
    }
    p.ls-l {
        top: 49% !important;
        font-size: 18px !important;
    }
    .ls-inner, div#layerslider_1, .ls-slide.ls-slide-1.ls-animating, img.ls-bg {
        height: 493px !important;
    }

    h1.ls-l {
        top: 45% !important;
    }

    img.ls-bg {
        margin-left: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
    }

}

Let us know how it goes.

[ursaminorParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Layerslider treats the image as a separate element and not a background image of the slide. This is something that they need to change. There is no other way to resolve this because we are dealing with an image element. If only it is a background image, it can be easily tweak with a few lines of css. What I could suggest is to test out create another slider with the same layout but this time you use the Slider Revolution plugin which you have installed. In my opinion, RevSlider is way more better and you can almost control anything on the slider. You can compare both the slider by looking at their documentations here:
https://support.kreaturamedia.com/docs/layersliderwp/documentation.html#slider-settings
https://www.themepunch.com/revslider-doc/general-settings/

Hope this helps.

[Author]

Posts