The disappearing advanced heading

Some hope for those struggling to make Greenshift plugin funky features (it’s great btw) work on some IoS devices where you’ve nearly finished and the heading disappears on your apple device or your attempts to use even flat colour turn to black!

Step 1. Change any text gradient settings to 0 degrees (135 conflicts with other items).

Step 2. At the very top of your responsive stylesheet (or custom css) add (under #header) the following class: .gradient-span with the following attributes (if you still want to keep the gradient)

background-image: -webkit-gradient(linear,left top,right top,from(#d51162),to(#8d11d5));
background-image: linear-gradient(0deg,#d51162,#8d11d5);
-webkit-text-fill-color: transparent;

Don’t ask me why, but this works – the colours are irrelevant, you keep the gradient specified in green shift. Now you will see colour back on your IoS devices.

Step 3: Some things may have jumped around as the screen (esp. if you have 2 line heading) as the browser now treats your heading as a span, so remove line breaks in headings and use width to make it all behave.

Step 4: Next hurdle is that whilst you may have colour in portrait on ipad or ipad mini, the wretched heading disappears in landscape!! The subtitle may similarly misbehave. Remove the subtitle and you should be all OK.