White space at top in mobile that isn't in regular?

Additional info I came across while becoming even more exasperated:

1. The white gap is 48 pixels high.

2. This only happens on the page that is set as the front page of the site. If I pick a different page to be the static front page, and then I view the page that used to be the front page (and was having the issue) there is now magically no gap between the black title bar and the featured image.

I really hope someone knows how to fix this. I have spent hours trying to fix this, when I should have been done with the whole site by now.

Did you change the front page since you took the screenshot? This is what I see when I visit your site (on iOS 7, Mobile Safari): https://imgur.com/ZyFPGI9. I noticed that it looks a bit different from the page that’s shown in the graphic you posted.

After about seven hours, I sort of figured it out, and sort of found a workaround. The part causing the problem is the .content-area element in style.css. On all other pages, it doesn’t make a gap, but for a page set as the static front page, it does.

The workaround I used was twofold. I added a section of CSS to only affect the page in question (in this case, page id 9) as follows:

body.page-id-9 .content-area {
padding-top: 0px;
}

The problem was that then, on the desktop version, it shoved the featured image upwards by 48 pixels, hiding part of it under the top black title/nav bar. So I couched that code above inside of a @media only screen and (max-device-width: 720px) to try to make that fix apply only to mobile devices.

So, altogether —

@media only screen and (max-device-width: 720px){
{
body.page-id-9 .content-area  {
padding-top: 0px;
}
}

Someone else looking to make this fix would need to swap out the number 9 above with the number of the page they set as the static home page.

If somebody knows a better way, I would still appreciate it. I never seem to be able to get much help here.