Featured image/area/header size change

Hi everyone,

I have seen quite a few posts on changing the size of a header, but so far I have been unable to resolve my issue.

I am working with a theme I purchase from DesignerThemes, and they do not offer CSS support, which is why I am turning to you guys. I hope it’s okay for me to post here! The theme is this one: https://demo2.designerthemes.com/stack/ (live demo)

Super simply, what I want is to make the image at the top of every page shorter. These images are the Featured Images assigned to the specific page/blog post. If I don’t assign any image, every page but the homepage gets a grey box slightly shorter than the image. The homepage just loses that area all together – I guess because it is in fact a slider (none of the other pages have sliders).

When an image is uploaded, no matter its size, it is resized to fit that size of box.

I have gone into the various php files of the theme and the divs that I think are likely the culprits are featured-area and featured-image. However from there I don’t really know how to proceed. I tried entering this code into my custom CSS with a small amount of success re: the homepage:

.slider-auto-height .home-slider {
	height: 400px;
}

.home-slider .home-flexslider {
	overflow: visible;
}

.home-slider .home-flexslider .slides > li {
	position: relative;
}

.home-slider .featured-area-wrap {
	overflow: hidden;
	max-height: 400px;
	position: relative;
}

.slider-auto-height .home-slider .featured-area-wrap {
	max-height: 400px;
}

(where I entered 400 px)
While this did crop the picture, it left a grey box at the bottom, the same sort of box that appears on other pages if I don’t assign a featured image.

Anyone have any thoughts on how to address the issue in a neat and global sort of way?

Thanks for reading ??
Sophie