Mobile portrait issues on website

Hi,

So I’m setting up a portfolio website but I’m having difficulties with the mobile portrait view.

The theme I’m using is responsive and I’ve been using Elementor builder and Elementors settings are how they should be.

Issue 1: mobile portrait view is zoomed out – this is not the case for desktop or mobile landscape.

Issue 2: black space under every page on mobile portrait only.

Talking to the theme developers they said that theres no issue with the theme and that the black space at the bottom of the pages is from not enough content – this seems ridiculous since the black space only shows up in portrait and not landscape. Theres also exactly the same content as on desktop.

So I’ve tried a few css workarounds but none have worked:

@media only screen and (max-width: 1300px) {
.elementor-218 .elementor-element.elementor-element-ea78678 > .elementor-container {
max-width: 100%;
}

.elementor-218 .elementor-element.elementor-element-6ce9cd4 img {
width: 100%;
margin: 0;
padding: 0;
}
}

and this for the black space

@media only screen and (max-width: 767px) {
.elementor.elementor-218 {
height: 100vh;
}
}

It would be great if you guys could help me out with these issues.

Many thanks

The page I need help with: [log in to see the link]