Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 25, 2018 at 11:22 pm #903080
    ezUpstarts

    So I was just wondering where to change the height of my Advanced Layer Slider on mobile because I think it’s kinda small. And how do I also change the size of the logo and text within it?

    January 26, 2018 at 8:36 am #903246
    Victoria

    Hey ezUpstarts,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@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;
 }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 20, 2020 at 4:19 am #1254218
    ellamac

    Hi there,
    I am also wanting to increase the height of the layerslider on mobile only.
    Should I be changing all #layerslider_10 on the above code to #layerslider_1 for the URL supplied?
    I did try this and it didn’t work so must have missed something!
    Many thanks in advance!!

    October 22, 2020 at 6:15 pm #1255027
    Victoria

    Hi ellamac,

    https://share.getcloudapp.com/llu2EpxG Here is where you can see your Layer Slider id and adjust the css given above.

    Best regards,
    Victoria

    October 22, 2020 at 10:17 pm #1255100
    ellamac

    Thanks Victoria.

    I’ve added the following code to themes/enfold/css/custom.css but it hasn’t made any difference.
    Is it the height: 500px !important; that I need to adjust to make the slide larger on mobile?
    I changed this from 200 to 500 and haven’t seen any change. Any idea where I’m going wrong?

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

    October 26, 2020 at 9:29 pm #1255841
    Victoria

    Hi ellamac,

    Your slider looks fine without this code. The images will scale not proportionally. The Layer Slider is hard to adjust for mobile sizes since there are not many custom classes or write inline css for each slide.

    Best regards,
    Victoria

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