OMG! I found the fix, I can't believe I've actually managed to do this! An additional 8 hours went into trying to work this out! So worth it though!

Anyone wanting to do the same if they select Style 8 for Single Posts Template, this is the CSS code I added:

body.single .post-image:before{
  content: '';
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, #3A95DF 100%);
  opacity: 1;
  z-index: 2;
}
@media only screen and (max-width: 767px)
{.standard-post-special_wrapper {
    position: sticky;
    background: #ffffff;
    z-index: 2;
    padding-top: 20px;}
}

The same thing happened, nothing changed. :(

Hi there,

I love the slider background gradient overlays on the homepage, so I wanted to use the same overlay for the featured images on my posts as I selected Style 8 for Single Posts Template which displays the header over the featured image.

I thought I did it until I checked the mobile version of the site and realise it covers the heading.

Been trying to work it out for the past 5 hours, messing about, but finally decided to post a ticket.

Here's the CSS I added:

.post-image::before{
  content: '';
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, #3A95DF 100%);
    opacity: 1;
}