Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 24, 2017 at 8:31 pm #799123
    Donkies11

    Hello Support,

    I’m working on this site: http://dev.lindyjames.com/.

    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.

    Sincerely,
    Greg

    • This topic was modified 6 years, 11 months ago by Donkies11.
    May 26, 2017 at 10:48 am #800053
    Andy

    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,
    Andy

    May 31, 2017 at 9:44 pm #802206
    Donkies11

    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,
    Greg

    June 1, 2017 at 5:18 am #802309
    John Torvik

    Hi,

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

    Best regards,
    John Torvik

    June 1, 2017 at 3:11 pm #802581
    Donkies11

    Hello John/Support,

    I’m using chrome on an android platform.

    The H1s are inconsistently loading… as described previously.

    – Greg

    June 5, 2017 at 5:32 pm #804059
    Donkies11

    Hello Support,

    I’m checking in on this.

    Can you check the site with an actual phone?

    Sincerely,
    Greg

    June 6, 2017 at 5:31 am #804292
    Nikko

    Hi,

    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,
    Nikko

    June 6, 2017 at 11:42 pm #804746
    Donkies11

    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!

    Sincerely,
    Greg

    June 7, 2017 at 3:02 am #804783
    Nikko

    Hi,

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

    Best regards,
    Nikko

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