Space Below Header Image on Ipad/Mobile

I’m new to WordPress and I’m using the Euphony theme. I have found on forums some additional css to enable the header image on my website to adjust in size when viewing on a tablet or mobile (see below). However, a large space then appears between the header image and the content of the page, so you almost wouldn't know there was anything to scroll down to. The website is www.thisiship.co.uk. Any help gratefully received 🙂 My added css so far is: .custom-header .wrapper::before { background-image:none; } .has-header-media .custom-header-media .wp-custom-header img { display: block; }