Multi-Layer LayerSlider Issue in Larger iPads - Support | Kriesi.at

Tagged: LayerSlider, portrait

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
November 18, 2019 at 6:46 pm #1157936

berniedidit
Participant

Hi, Y’all.

One little nuisance issue I’m having with LayerSlider responsiveness. I’ve created a multi-layer, animated, LayerSlider, full-width slide. Body and headline positioning is the same and visible for desktop and tablet, with 2 alt layers visible in a slightly different position for smartphone only. The smartphone positioning is higher on the slide as I’m using a transparent header on the homepage, but when the narrowing of the device settings goes below the default of 768px the non-transparent slider triggers and without the transparent logo and menu laying over the slider background image, the type is to low. Anyhow all works great until you use an iPad or other tablet in the 10.5″ – 11″ portrait orientation. It’s fine in landscape and the 12.9″ iPad, but there seems to be a sweet spot in the 10.5 portrait orientation that I can’t isolate and assign to the smartphone layers. Is there an easy way to tell LayerSlider or Enfold to use the smartphone settings for LayerSlider up to, as far as I can determine, 834px? At least that’s what I think the width of the 10.5″ iPad is in portrait mode. I just want it to trigger that little bit of width in portrait mode, because I prefer the way that the transparent header is activated in landscape orientation on that same device. Dev Server domain in private content.

Gosh, I hope this makes sense. Many thanks for the support!

Bernie

November 22, 2019 at 12:54 pm #1159117

berniedidit
Participant

Hello?

November 22, 2019 at 3:23 pm #1159193

berniedidit
Participant

I’m still wrestling with this LayerSlider. I’ve re-classed the higher type position for tablets to use the same position as for smartphones. It fixed the issue for the 10.5″ iPad, but now the iPad Mini landscape, 9.7″ iPad landscape and 12.9″ portrait are picking up the transparent header with the higher text position. This causes the animated text to nearly run into the logo. This LayerSlider plugin is very difficult to use with multiple layers. Only being able to adjust visibility based on these vague parameters (Desktop, Tablet, Mobile) is just not practical given the range of devices available today. It’s been 4 days with no response from you. I may install RevSlider and try to recreate the slide at this point or maybe abandon Enfold for Divi to find a solution.

November 24, 2019 at 2:57 am #1159537
Mike
Moderator
Hi,
Sorry for the late reply, instead of using the Desktop, Tablet, & Mobile settings you can use css media queries which will give you far more control, for example iPad Mini landscape would look like:
```
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}
```
on the page I linked to you will find many good examples that will target specific devices, and you can set the numbers to any size.
But in my experience targeting certain layers in the layerslider can be tricky, I recommend creating a duplicate of your slider with the layers the way you want them for these devices and use the media queries to show or hide the sliders, this approach works well because you don’t have to take into account the slider’s animation.
If you create a demo page with several sliders for the different screen sizes we could assist with the media queries so you can see how this would work.

Best regards,
Mike
November 30, 2019 at 5:06 pm #1161466
berniedidit
Participant
Thanks for this instruction, Mike. I’ve added these instructions in Quick CSS:
```
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {[layerslider id="1"]}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  {[layerslider id="2"]}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 767px) {[layerslider id="2"]}
```
It’s mostly okay across the board so long as the devise is a smartphone or is pulling the transparent header down in landscape, but where it falls down routinely is when the non-transparent header is called down. Then the position of the copy block is too low even in layer slider 2 because the logo is removed from its position over the background image. I’ve created a 3rd slide with the copy block even higher on the slide for use when the non-transparent header is visible, but I don’t know how to make that distinction. Of course, there’s a real possibility that I’m not thinking about this correctly. I’m including special credentials to the dev site in private in case it’s easier for you to sort than try to explain it to me.. Once the issue of which slider to call is resolved, I can go in and fine-tune the individual sliders to position the copy block down to the pixel.

Many thanks for the support!
- This reply was modified 4 years, 11 months ago by berniedidit.
November 30, 2019 at 7:21 pm #1161481

Mike
Moderator

Hi,
Thanks for the feedback and the login. I see your sliders with the text layers at 200px, 225px, and 250px.
In my tests on Chrome on Windows, mobile, tablet, and desktop all look good. I assume you cleared your browser cache, so please include screenshots of what you are seeing in the Private Content area to point out what I must be missing.
Thank you.

Best regards,
Mike

December 1, 2019 at 4:24 pm #1161637
berniedidit
Participant
Hi, Mike.

I’m not trying to move the goalpost on you, but it seems the problem I’m having is that the Quick CSS media query “styles” aren’t working. No matter what changes I make to the sliders, the site is only pulling “layerslider id=1”. To check this I turned off the visibility on tablets and phones on #1 and turned off the desktop visibility of #2… and sure enough it’s only pulling #1 because everything short of the 12.9″ iPad is missing the copy block. Inspecting the slider confirms (see attached screenshots). I guess using the LayerSlider shortcode in the */STYLES GO HERE/* media queries is a no-no. How else can I call the different sliders in the media queries? If I can can just call the correct slide, I can put the copy block wherever I want. Here are the media queries I’m currently using again:
```
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {[layerslider id="1"]}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  {[layerslider id="3"]}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 767px) {[layerslider id="3"]}
```
- This reply was modified 4 years, 11 months ago by berniedidit.
December 1, 2019 at 10:36 pm #1161677
Mike
Moderator
Hi,
Thank you for the feedback, I created a test page for you, please see the link in the Private Content area.
So I’m on the Windows OS and needed to remove the -webkit-min-device-pixel-ratio: 1 from the css, which is only for IOS, but this will give you the idea how this works. You can add the -webkit-min-device-pixel-ratio: 1 to check on IOS
So the sliders are #layer_slider_1, #layer_slider_2, and #layer_slider_3 all of the #after_layer_slider_X are the special headings used to easily show which slider is showing.
This is the css I added to a code block on the page, please feel free to examine and adjust.
```
/*this is to show slider 2 and hide the others*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)  {
	#layer_slider_3,#after_layer_slider_2,
	#layer_slider_1,#slider_1 {
		display:none !important;
	}
	
}
/*this is to show slider 1 and hide the others for IOS if -webkit-min-device-pixel-ratio was used*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)  {
	#layer_slider_3,#after_layer_slider_2,
	#layer_slider_2,#after_layer_slider_1 {
		display:none !important;
	}
	
}
/*this is to show slider 1 and hide the others for small devices*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 767px) {
	#layer_slider_3,#after_layer_slider_2,
	#layer_slider_2,#after_layer_slider_1 {
		display:none !important;
	}
	
}
/*this is to show slider 3 and hide the others for all devices*/
@media only screen 
and (min-device-width : 1025px)   {
	#layer_slider_1,#slider_1,
	#layer_slider_2,#after_layer_slider_1 {
		display:none !important;
	}
	
}
```
Please let us know if this helps.

Best regards,
Mike
December 5, 2019 at 5:10 pm #1163075

berniedidit
Participant

Thanks for all this Mike, but I guess I’m a little too thick in the skull to make this work. I can’t even get your test page to work. I’ve just recreated the slider in RevSlider and everything is as it should be now. Took about an hour… guess I should have done this a long time ago and saved us both the hassle, huh? Anyhow, it’s okay to close this ticket. Maybe it can help someone else in the future.

Many thanks for all the effort!
Bernie

December 5, 2019 at 5:12 pm #1163078

Yigit
Keymaster

Hi,

Glad Mike could help! :)

For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/
If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

Best regards,
Yigit
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Multi-Layer LayerSlider Issue in Larger iPads’ is closed to new replies.