Fullwidth Easy Slider with Caption style "Heading Style Modern"

Hi,
Thank you for your question and the link to your test page, I removed the image element inside of the color section and add a background image and a special-heading element, the color section had a costom ID of verksamhet-color-section I changed the css to this:

#verksamhet-color-section  {
      background-size: cover;
}

and I added this script to your functions.php

function custom_script() { ?>
    <script>
function setHeight(el,val){
    var box = document.querySelectorAll(el);
    var i;
    for(i = 0;i < box.length;i++){
        var width = box[i].offsetWidth;
        var height = width * val;
        box[i].style.height = height + 'px';        
    }
}
setHeight('.avia_desktop #verksamhet-color-section > .container',.40);
setHeight('.avia_mobile #verksamhet-color-section > .container',.30);



var container = document.querySelector("#verksamhet-color-section");
var inner = document.querySelector("#verksamhet-color-section .av-special-heading");
var inHeight = inner.offsetHeight;
container.style.height = window.innerHeight;
container.style.width = window.innerWidth;
var conHeight = container.offsetHeight;
inner.style.marginTop = ((conHeight-inHeight)/2)+'px';
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

now on page load the height of the color section is set based on the width of the page, with a different percentage for mobile & desktop, it also centers the special-heading vertically in the color section.
Please note that this works on page load, so if you test by resizing the browser you need to reload the page for each size. This will not affect your users as their screen size will not change after load.
I recommend using a child theme and moving this to it so it won’t be lost in updates.

Best regards,
Mike