Screen Options for each element is a great feature – but not for landscape ipad

Same here!
Is there a possibility to change the 990px above? Newer iPad’s have a resolution of 2048 wide.
In portait mode no problem but landscape goes wrong

Morning Victoria!

The link to my ‘issue’: https://www.hetcoachcafe.nl/in-de-praktijk/
I’ve placed two easy sliders, one containing a backgroundvideo (only visibile on large screens (wider than 990px – eg: Desktop) and a second one that’s hidden on large screens.
Problem with newer iPad’s is that Enfold recognizes it as large screen. Is there a way to make an addition to the quick CSS to hide the background video on iPad4?

Thanks!

@guenni Thanks for the input. But will all sliders be not visible then? Because I’m using 1 on desktop (with the video) and if the site is opened on a smaller screen another slider will be visible with only images

what does your ipad show than now : both ?

or you can try the media query from link above: Link

Too embarrassing

• This reply was modified 6 years, 8 months ago by Guenni007.

oh wow – i got a black out – that could not work – sorry
i first have to go and drink some coffee

your intention is to show the image slider on ipad air even on landscape mode – and not the video.
now it shows the video on landscape !

can you try this first – if it does not work the way you like:

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
  	 .page-id-40 #full_slider_1.wp_is_mobile {display: none};
  	 .page-id-40 #full_slider_2.av-desktop-hide {display: block};
}

to prove it you have to empty the safari cache

or give this a try – but i don’t know how enfold manages it :
there are two classes set
.av-desktop-hide to your slider 2
.wp_is_mobile to your slider 1

so the condition to find for your ipad is the one thing – but the other will be to be more selective than enfold setting

add_action('wp_footer', 'settings_for_ipad');
function settings_for_ipad(){
?>
<script type="text/javascript">
(function($) {
	$(document).ready(function($){
		var deviceAgent = navigator.userAgent.toLowerCase();
		if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
		  $('.page-id-40 #full_slider_1.wp_is_mobile').css( 'display' , 'none' );
		  $('.page-id-40 #full_slider_2.av-desktop-hide').css( 'display' , 'block' );
		}
	});
})(jQuery);
</script>
<?php
}

• This reply was modified 6 years, 8 months ago by Guenni007.

:-( imagesliders on all pages work fine on iPad in landscapemode except for the page with the video-slider… Same behavior as the standard ‘screen options’ tab in the ALB

Thanks Guenni. To bad but it doesn’t work :-(

This works!!! And what do I have to add to this code If I want te show the video and the title above on iPad? If you rotate to portrait-mode the video and title appear below the text.

on my ipad you page id 40 ( in de parktijk ) shows now correct.
what do you mean by that : I want te show the video and the title above on iPad
can you make a visualisation on how it should look like

please go to ipad settings / safari and empty the browser cache .

this is what i see on your page (click to enlarge):

you didn’t mention that above.

try this please instead:

add_action('wp_footer', 'settings_for_ipad');
function settings_for_ipad(){
?>
<script type="text/javascript">
(function($) {
	$(document).ready(function($){
		var deviceAgent = navigator.userAgent.toLowerCase();
		if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
		  $('#top.page-id-40 #full_slider_1').css( 'display' , 'none' );
		  $('#top.page-id-40 #full_slider_2').css( 'display' , 'block' );
		  $('#top.page-id-40 #av_section_1 .av_textblock_section.av-desktop-hide').css( 'display' , 'none' );
		  $('#top.page-id-40 #av_section_1 .avia-video.av-desktop-hide').css( 'display' , 'none' );
		}
	});
})(jQuery);
</script>
<?php
}

:lol Enfold is great : on avia-compat.js there are some checks concerning to devices. (test(navigator.userAgent))

as i did above with that code

var avia_is_mobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement)
{
	avia_is_mobile = true;
	document.documentElement.className += ' avia_mobile ';
}

so if it is a mobile the html document get the class avia_mobile

so we could use that allready for changings:
delete the function in your functions.php and try – this must be the same effect because avia-compat.js allready checked it an set that class to html:

.avia_mobile  #top.page-id-40 #full_slider_1,
.avia_mobile  #top.page-id-40 #av_section_1 .av_textblock_section.av-desktop-hide,
.avia_mobile  #top.page-id-40 #av_section_1 .avia-video.av-desktop-hide {
  display: none !important
}

.avia_mobile  #top.page-id-40 #full_slider_2 {
  display: block !important
}

because now you want to show the video on the bottom on ipad ?

on desktop i can go to developer tools and see all classes set.
But on ipad i did not have that ( simulators on web did not show this either)
so i had to search in enfold folder to recognize that on html the class is set – good to know for me too.