Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 20, 2016 at 11:51 am #650744
    Inspigate

    I need you help with the behaviour of a LayerSlider at
    dev.schoenheitsop-ratgeber.de

    The picture in the slider has the dimensions 1400 * 630

    My slider options are:
    Slider width: 1400
    Slider height: 630
    Responsive mode: ON
    Max-width: not set
    Full-width: ON
    Responsive under: 1400
    Layers container: 1400

    On desktop screens everything is fine,
    On smaller screens the picture is responsively shrinking, but the height of the slider stays at 630 Px which causes a big white space on iPad or iPhone.

    What do I have to change that the slider is fully responsive so that there does not remain the whitespace on tablets and smartphones.

    • This topic was modified 8 years, 6 months ago by Inspigate.
    June 21, 2016 at 7:05 am #651298
    Rikard

    Hey Inspigate,

    Please try the following in Quick CSS under Enfold–>General Styling:

    @media only screen and (max-width: 1024px) {
#layerslider_5 {
height:auto !important;
}
}

    Thanks,
    Rikard

    June 21, 2016 at 9:50 am #651357
    Inspigate

    NO, it does NOT work.

    Now the picture is centered and there is a whitespace above and beneath the picture on smaller screens.

    June 23, 2016 at 3:55 am #652433
    Ismael

    Hi,

    Try to add the image as the slide background or replace the layer slider with a full screen slider element. Or you can add another slider specifically created for mobile. Toggle the elements’ display with css media queries: http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Best regards,
    Ismael

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