Full screen slider display

so now it works – but now you have to remove the screen rules for those sliders – because on ipad 768px no slider is seen.
the padding and navigation we will adjust after that.

My advice : go back – and live a short while with two sliders the same time.
i will look to find a better way to have the slider on top over the header – because these shifted Containers do not belong to the header – so they do not count on main padding etc. pp.
maybe an insertBefore to a header hook would be the better way. Then the slider is part of the header.
But that needs a bit of more time. – And we had to find a way to have that depending on screen width.

hm – the idea with the header hook could not work propper – because both sliders are fullwidth elements and would destroy the structure of the header.

so my last attempt on that will be your idea here
i change now my test site.

so this is my last trial for now:
it only works for devices not on resize option
this is a one fullwidth-slider only on that page which has the outlook of a fullscreen-slider on desktop devices.
and if it is load on mobile devices it is a full-width slider.

https://webers-testseite.de/guenni/two-sliders-2/
i gave to the fullwidth-slider the custom-class: fullscreen-onbig
there i my page id in the code – adjust it.

function make_background_image(){
if ( is_page(804) ) {  
?>
<script>
(function($){
$(document).ready(function() { 
      var sliderLi = $('html.avia_desktop .fullscreen-onbig .avia-slideshow-inner li');
      sliderLi.each(function() {
        var bgUrl = $(this).find('img').attr('src');
        $(this).css({
            'height'  : '100vh',
            'background-image'  : 'url('+ bgUrl +')',
            'background-size': 'cover',
            'background-repeat': 'no-repeat',
            'background-position': 'center center',
        });
        $(this).find('img').detach();
      }); 
});
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'make_background_image');

https://gtmetrix.com/reports/webers-testseite.de/953lvr7o

by the way: https://webers-testseite.de/testimonial-styling/

no one hampers you to calculate other width: f.e.

for my example page:
because it is a grid-row after the slider the calculation it a bit different from color-section as follower.

@media only screen and (max-width:989px) {
  #united_slider .avia-slideshow.av_fullscreen {
      width: calc(100vw - 16%) !important;
      height: 45vw !important;
      left: 50%;
      transform: translateX(-50%);
  }
}