Elements Page Hero controlling height of image and controlling UX on mobile

Hi
I set up my page hero but am having difficulty with a couple of issues.
The page hero height is too much - it takes up half the screen and I would like it significantly smaller. I have played around with % and px settings in the padding field in the Element screen but I don't really understand what that is doing and often it doesn't change anything from what I can see.
The image is pulled from a 1200 px image which is the Featured Image.

Another issue is that the site Logo and Article title get mangled in mobile. Viewing the screen on my mobile the logo takes up half the screen and does not seem to scale at all. Added to which the logo sits right on top of the article title which is then obscured and unreadable. I thought the logo might scale but it seems not.

I guess the page hero could be omitted entirely on mobile but might be quite nice to see on a tablet as long as the positioning and size of the logo can be controlled along with the article title and height of the image shown.

I am sure this problem affects many but did not find an=y solutions that worked for me. Any help would be much appreciated.
Thanks
Ian