ZooBobby

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

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.

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.

Ended up solving my own issue, but thought I would post the solution here in case someone else encounters it.

The problem was Photon, which is one of the automatically enabled features in Jetpack. In theory, I guess it’s a good idea — it creates cached versions of images on the WordPress site so that it will reduce the strain on your server to keep serving up the same images.

However, since my viewers kept seeing broken image links, something obviously wasn’t working as intended.

I went to my dashboard, went to Jetpack, deactivated Photon, and now everything’s working like it’s supposed to.

Seriously? I’m the only one this has happened to?