White space below carousel when resizing image

Question

I've come across an issue i cannot seem to solve. Im using uncode theme- wordpress. If you see the link in desktop, the images of the carousel are waaay bigger than it needs to be. On mobile it is ok. i want it to fit the available size of screen, or at least kind of match it.
I have tried css and js, but if i change the height of the carousel image, there is a HUGE white space below it. there are no options available for this inside WP, so im assuming css/js is needed.
I added this custom css to make it visible for you the error. If the white spacing is removed, i can make the JS code easily so the images fit the screen:

    .post-content .vc_row.limit-width.row-container {
    max-width: 100%;
    }

   .post-content .row-parent {
    padding: 0 !important;
    }

    #gallery-206225 .owl-dots{bottom:-22px!important;}




.owl-carousel .owl-item img {

    width: auto!important;
    height: 500px!important;
    display: block;
    margin: 0 auto;
}

@media(max-width:768px){

    .owl-carousel .owl-item img {
    width: 90%!important;
    height: auto!important;
    max-height:900px;
}}

any thoughts?

Link Here

Answer 1

You can set a max-height to the image and have that apply only to desktop screens above 1100px. Like so:

@media (min-width: 1100px) {
.owl-carousel .owl-item img {
    max-height: 400px;
}}