Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 21, 2017 at 1:02 pm #825100
    Chris_85

    Hi,

    i use the layer slider. Is it possible to determine the height of the image for mobile devices? At the moment i use the slider here: https://koengeter-immobilien.de/ but i want to have other scaled responsive images in the slider like on this site: http://juliaundgil.de/

    i hope you can help me…

    best regards

    chris

    July 23, 2017 at 4:10 am #828553
    John Torvik

    Hey Chris_85,

    Thank you for writing in!

    To control the slider height, just add the following code at Enfold Theme Options > General Styling > Quick CSS

    
@media only screen and (max-width: 767px) {
div#layer_slider_1 {
height: 151px !important;
}}

    P.S: You can change the 151px by your value.

    Best regards,
    John Torvik

    July 31, 2017 at 8:58 am #831999
    Chris_85

    thanks!

    July 31, 2017 at 5:24 pm #832282
    Sarah

    Hi!

    We’re glad that John was able to help you! Do you need further assistance with this?

    Thank you for using Enfold.
    Cheers!
    Sarah

    August 1, 2017 at 10:40 am #832746
    waveseven

    Hi

    I have tried this….

    The background colour becomes the size i would like but the content (images etc) still scale to the width. I would like it so the height is 256px so that only the left hand side of the slide is visible. It used to work OK before I updated enfold and layslider by putting “min-width: 600px !important;” in the layerslider custom css, but that doesn’t work anymore.

    Is there a way of doing this now?

    Many Thanks
    Regards
    Colin

    August 2, 2017 at 6:42 am #833196
    Rikard

    Hi Colin,

    Could you post a link to where we can see the slider in question please?

    Best regards,
    Rikard

    August 2, 2017 at 8:08 am #833247
    waveseven

    Hi Rkard

    I have put the link below.

    I would like it so that when you view it on a mobile only the text part of the banner in the orange is visible. (so only the left hand side)

    Many Thanks
    Regards
    Colin

    August 2, 2017 at 1:19 pm #833421
    Rikard

    Hi Colin,

    Thanks for that, we could give you CSS which may or may not work. What would a better idea in my opinion would be to hide the Layer Slider for mobile screens using this CSS:

    @media only screen and (max-width: 767px) {
.page-id-2569 #layerslider_37 {
  display:none !important;
}
}

    Then add a Color Section under it and add the orange part as an image or background to it. You can select to only show the Color Section for mobile screens only in the element options. Would that work out for you?

    Best regards,
    Rikard

    August 2, 2017 at 1:32 pm #833431
    waveseven

    Hi Rikard

    Yes I’m just looking for some css which on a mobile device would make the layerslider only display the left 50% of the slide. I was able to do it before with “min-width: 600px !important;” but that doesn’t work anymore.

    I don’t want the slider to disappear as on other pages I want to show just the left side as well which is the left part of the image.

    Many Thanks
    Regards
    Colin

    August 3, 2017 at 5:18 am #833739
    Rikard

    Hi Colin,

    Ok, thanks for the feedback. Though I think my suggestion in my last post would be easier than using CSS. Could you try to add a Color Section below the slider and add the part of the image that you want visible on mobile screens? You can then hide that Color Section for all screens except mobile.

    Best regards,
    Rikard

    August 15, 2017 at 4:23 pm #839384
    waveseven

    Hi

    Just in case anyone else wanted to have a minimum height of their layer slider (version 6.4 >) – I managed to achieve it by adding the following to my css

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .ls-wrapper, .ls-container {
    min-height: 250px !important;
    }
    .ls-wrapper > .ls-layer,
    .ls-wrapper > a > .ls-layer
    .ls-wrapper > .ls-bg {
    height: 100% !important;
    width: auto !important;
    margin-left: -30px !important;
    }
    }

    You can us “margin-left: -30px !important;” if you want to shift it to the left a bit

    Regards
    Colin

    August 15, 2017 at 4:49 pm #839405
    Sarah

    Thank you for sharing, Colin @waveseven!

    It looks like Chris is okay with this topic also.

    We’ll close this topic now. For any other questions or issues, feel free to post them here on the forum and we will do our best to assist you.

    Thank you for using Enfold.
    Cheers!
    Sarah

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘options for layer slider on mobile devices’ is closed to new replies.