Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 21, 2019 at 2:04 am #1158672
    webdesign

    Hi!
    I found a thread with info on making the layer slider button responsive on mobile but it is not working for me. I just need the button to get larger on mobile/tablet so it’s readable. This is the code I found:

    @media only screen and (max-width: 767px) {
    .Layerslider_button { color: black; width: 100px;}
    }
    @media only screen and (max-width: 479px) {
    .Layerslider_button { color: black; width: 50px;}
    }

    Thanks!

    November 25, 2019 at 12:22 pm #1159817
    Ismael

    Hey webdesign,

    Thank you for the inquiry.

    Edit the button layer in the slider, go to the Links & Attributes panel and add a unique Class attribute/s to the layer separated by space — use “custom-button black” for example. You can then use this class attribute to adjust the style of the layer.

    @media only screen and (max-width: 1024px) {
   .black {
      color: black;
   }

   .custom-button { 
      min-width: 200px;
   }
}

    You can also adjust the style of the layer in the Styles > Custom CSS field.

    Best regards,
    Ismael

    November 26, 2019 at 7:33 am #1160213
    webdesign

    Hey Ismael,
    Well, your concept is good one, only it didn’t work for me. I used your code with some modifications (I actually need the button to be larger on mobile because it’s tiny). But for now, I’d be happy just to get the code working. I put the new class ID where you described. I DID NOT add any spaces but instead called it “custom-mobile-button-large” for the class ID in the layer slider Links & Attributes. Then, in my child css I added:(I wasn’t sure why you had a class of .black so I added both elements to the new class name). Ideally, my button will have the same colors as on desktop (green and then blue on hover), but more importantly it needs to be visible on mobile. It’s too tiny. Anyway, I added the following, but nothing happened (yes, I cleared my caches, etc. :) ):

    @media only screen and (max-width: 768px) {
    .custom-mobile-button-large {
    max-width: 200px;
    background-color: black;
    }
    }

    November 28, 2019 at 3:56 am #1160858
    Ismael

    Hi,

    Thank you for the update.

    The modification is actually working, but you may need to adjust css values a bit to actually see the difference.

    Screenshot: removed as per user request

    As you can see in the screenshot above, we set the font-size to 16px, width to 200px and added the line-height property to vertically align the text.

    Best regards,
    Ismael

    November 28, 2019 at 4:42 am #1160861
    webdesign

    Thanks Ismael! I’ve actually been working on it all day and I had made very similar adjustments. I didn’t put in the line height, so I might do that. I found out that by adding my code to the “customize additional css” versus the child css stylesheet I was able to get results. I know the child is the best place to keep code so that when theme updates are applied, custom settings aren’t over written. Will code be overwritten in the “Appearance” “customize” “Additional CSS”.? Also, I was having issue with the actual link area being large enough on mobile (it was restrained to the upper left and barely clickable on mobile). So, I added some padding to fatten up the actual link area in a.ls-layer-link:link. I was just not able to get a hover effect that worked, so when you click the button, it doesn’t turn blue on mobile like the other buttons. Oh well. This is what I ended up with.
    @media only screen and (max-width: 768px) {
    .custom-mobile-button-large {
    width: 110px!important;
    height:22px!important;
    font-size: 14px!important;
    text-align: center!important;
    background-color: #a3e83c!important;
    line-height: 20px!important;
    }
    }

    a.ls-layer-link:link {
    padding-right: 125px!important;
    padding-bottom: 35px!important;
    }

    November 29, 2019 at 10:47 am #1161168
    Ismael

    Hi,

    Great! Glad to know that you’re able to adjust it. We’ll close this thread for now. Please open a new thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Layer Slider Button Not Responsive on Mobile’ is closed to new replies.