Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #799123

    Hello Support,

    I’m working on this site:

    I’m having trouble getting the Advanced Slider element on the homepage to respond correctly to mobile/handheld devices.

    I’ve placed login credentials in the Private Content area.

    This is what I have so far:

    	/*** HOMEPAGE SLIDER ***/
    	#layerslider_4 {
    		max-width: 99%;
    	#layerslider_4 h1.sliderh1 {
    	font-size: 24pt !important;
    	font-weight: 100;

    You’ll see that the designer had me change elements in the slider element – which I believe is creating the issue with mobile. I’m just not finding the correct target element with CSS so that I can place the corrections in once for all four slides.

    Your help is appreciated.


    • This topic was modified 7 years, 1 month ago by Donkies11.

    Hey Greg,

    go to your LayerSlider inside backend. Choose to edit your slider in question. Edit the layer you want to change (for example “Body centered … H1”). Then open “Link & Attribute” tab. Enter inside CLASS element “sliderh1” as you already did. Then use this code inside Quick CSS field:

    @media only screen and (max-width: 736px) { 
    .sliderh1 {
    margin-left: -50px !important; 

    and adjust as needed.

    Best regards,


    Hello Andy/Support,

    That sort of is working.

    There are 4 slide elements in the homepage slider.

    1 & 3 are loading the H1 with the desired font size. 2 & 4 are loading a smaller font size. I’m not figuring out what CSS is working on the H1 for 2 & 3.

    Also, the buttons (blue w/ white border – image element) should be loading in with better alignment.

    Can you help me with the correct CSS for these elements?

    Thank you,



    I apologize, but I am not seeing any problem with the fonts.

    Best regards,
    John Torvik


    Hello John/Support,

    I’m using chrome on an android platform.

    The H1s are inconsistently loading… as described previously.

    – Greg


    Hello Support,

    I’m checking in on this.

    Can you check the site with an actual phone?




    I have checked on an android phone and noticed that the 2 slides you have mentioned doesn’t have the sliderh1 class which forced 56pt in font size. I have modified the slides by duplicating the h1s in all slides, adding the sliderh1 class to the original then hiding it in mobile, then on the duplicate I removed the sliderh1 class and hide it on desktop and tablet. Let us know if the changes are good, you still need to make some few tweaks though.

    Best regards,


    Hello Nikko,

    Thank you very much for your support. It is working on my phone now.

    I don’t completely understand the fix you did – and I’m good for moving forward and closing out this ticket.

    Thank you very much!




    You’re very much welcome and thanks for using Enfold :)

    Best regards,

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Advanced Layer Slider on Mobile’ is closed to new replies.