Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 17, 2018 at 6:02 pm #1010880
    info224

    Hi

    I would like to increase the size of the layer slider in the mobile view, please (I have selected the responsive setting within the slider setup). I have tried the following in the in the quick CSS but it has not worked. (I am using a child theme)

    @media only screen and (max-width: 479px) {
    #layerslider_10 .ls-wrapper.ls-bg-outer, #layerslider_10,
    #layerslider_10 .ls-wrapper.ls-bg-wrap img {
    height: 200px !important;
    }
    #layerslider_10 .ls-wrapper.ls-in-out img {
    width: 135px !important;
    height: 50px !important;
    }
    #layerslider_10 .ls-wrapper.ls-in-out h1 {
    font-size: 14px !important;
    margin-left: -60px !important;
    }
    }

    Login details are below. I’m also having an issue with the placing of the boxes below the slider. It could be to do with the following coding but they are on top of the sliders i.e. blocking them out and I would like the slider to show.

    I did insert the following before

    .flex_column_table.av-equal-height-column-flextable.-flextable{
    z-index:99999999999;
    }

    Thanks

    September 18, 2018 at 7:47 am #1011122
    Ismael

    Hey info224,

    Thank you for using Enfold.

    You can use this css to remove the negative margin of the columns so they don’t cover the layer slider.

    @media only screen and (max-width: 767px) {
.responsive #top .flex_column_table {
    display: block;
    margin-top: 0 !important;
}
}

    You can also include this code inside the css media query above to adjust the height of the slider.

    #layerslider_3, #layerslider_3 * {
    height: 500px !important;
}

#layerslider_3 img.ls-layer {
    width: 500px !important;
    margin-left: -50px !important;
}

    This may distort the images a bit.

    // https://imgur.com/a/Ewdj7DJ

    Best regards,
    Ismael

    September 18, 2018 at 8:27 am #1011136
    info224

    Hi

    Thanks for coming back to me I have tried the first code but unfortunately, the columns are still covering the layer slider.

    With regard to the second code is this in addition to the code I have put in the Quick CSS i.e.

    @media only screen and (max-width: 479px) {
    #layerslider_10 .ls-wrapper.ls-bg-outer, #layerslider_10,
    #layerslider_10 .ls-wrapper.ls-bg-wrap img {
    height: 200px !important;
    }
    #layerslider_10 .ls-wrapper.ls-in-out img {
    width: 135px !important;
    height: 50px !important;
    }
    #layerslider_10 .ls-wrapper.ls-in-out h1 {
    font-size: 14px !important;
    margin-left: -60px !important;
    }
    }

    Also, do I put it in the Quick CSS or elsewhere I am a little of unsure. Sorry for so many questions. I’m also using a child theme.

    Thanks

    • This reply was modified 6 years, 2 months ago by info224.
    September 18, 2018 at 9:01 pm #1011505
    info224

    Hi

    Good news I got the top code regarding the columns to work. Still unsure though about the second code i.e. where to place it

    September 18, 2018 at 11:26 pm #1011554
    Jordan Shannon

    Hi,

    All the code provided here can be placed into quick css. If it does not immediately work, you may have to clear the cache a few times over.

    Best regards,
    Jordan Shannon

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