Mobile formatting help

I suggest replacing your current CSS:

.front-page-content-area .with-featured-image {
    background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
    opacity: 0;
    padding-bottom: 0;
}

with this:

.front-page-content-area .with-featured-image {
    display: none;
}

That’ll hide the area properly at all screen sizes.

You’re running a WordPress.com site, but these forums are for folks running the WordPress software on their own hostinng. You can get custom CSS help for WordPress.com in this forum – please feel free to post there in the future:

https://en.forums.wordpress.com/forum/css-customization