I'm currently working on a website in wordpress. I've been struggling with this problem for a while. At the first the header image was too big even for computer. I managed to make it shorter using some extra css. However now it is broken for mobile. I've included a picture and a link to the website. This is what it looks like on mobile. It should be way shorter and also some kind of shadow is shown. Here is a link to the website.

The code below is the code I'm using to shorten the image for visitors on pc.

.twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media {
height: 50vh;}

Regards Luuc