Make front page banner fit to screen

Since I was thus far not provided with an answer I wanted to share my own interim solution:

Step 1:

In Elementor, select the section that holds the Sina Banner Slider. In the Layout tab, set height to “Fit to Screen”.

Step 2:

Add the following site CSS

.owl-carousel {
	z-index: 0 !important;
}

This prevents the banner picture from ‘spilling’ over onto the next section since it has z-index 1 by default.

Optional:

Reposition the text

On desktop:

.elementor-400 .elementor-element.elementor-element-b8d7106 .sina-slider-content {
	padding: 20% 30% 15% 10%;
	height: 100vh;
}

On mobile:

@media screen and (max-width: 767px) {
	.elementor-400 .elementor-element.elementor-element-b8d7106 .sina-slider-content {
	padding: 50% 5% 0 5%;
	height: 100vh;
}

Not sure how good of a solution it is since I am not a professional but it seems to work for me at least.

Hello,

Yes, it seems both options are useful. But we recommend the option 1 with adding unique wrapper id/class reference for the additional CSS. So it will prevent to overriding the default slider CSS.

Thanks.