Site-Header cut off

It’s going to be a little tricky, because there is more than one element involved.

The problem with your header background image being cut off can be fixed by changing the value of this element:

.site-header {
  background-size: auto;
}

to this:

.site-header {
  background-size: 100%;
}

That will make the width of the background image vary based on the size of its container, and the length remain proportional to the width, so it should resize with the various mobile devices you view it on.

However, you have a couple of settings that will add a bunch of nasty white space below the header as it resizes with the new setting if you go below 768 x 1024:

.site-branding {
  padding-top: 175px;
  padding-bottom: 175px;
}

You will need to play around with those settings at the various resolutions, perhaps altering them with @media queries in your CSS to get the spacing right at the different display resolutions if you can’t come up with a single setting that will work at all resolutions.

You really should be working with a child theme so your changes aren’t overwritten with updates unless your theme offers a way to add custom CSS.

Once you’ve determined that changing the background-size setting for your background image does what you want, you can post back here and get some help figuring out how to deal with the white space issue.

It’s worth noting that there are 2 issues here.

First issue is the missing site title and site description, this will result in bad SEO and bad UX. We should always put in site title and description, and use proper CSS to hide it visually.

The second issue is the header image, this theme is using header image as background so it doesn’t scale, even if we use some CSS to make it visible in iPad portrait we still have users who visit the site via mobile phone.