CSS - linear-gradient background not showing

[TYu]

We used linear-gradient as background-image for the header.

When every words fit into 1 line, it shows up as we want (photo1)

But the problem is that when the size of the word is larger, the second line just disappear.

Any one has any ideas ? Thanks a lot!

Here's the code in the module:

.custom-leaders .top-content h2 span{
color: rgb(5, 204, 152);
text-shadow: rgba(255, 255, 255, 0.2) 0px 2px 3px;
}

@supports (-webkit-background-clip: text) or (-moz-background-clip:text) or (background-clip:text) {
.custom-leaders .top-content h2 span{
background-image: linear-gradient(to top, rgb(22, 173, 248), rgb(120, 217, 244));
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
}

[webdew]

Hi @TYu ,

I have checked that the code has provided is working on my end. Check this SS https://prnt.sc/12griov .
Can you share the link with us so that we can check whats the issue here?

Best Regards.

[TYu]

Hi webdew,

The solution from Anton work well.

Here's the link I had issue before:

https://www.palo-it.com/es/events/ideathon-4-good-techo

Thanks! 

[Anton]

Hi @TYu, 

could you provide a preview link please? It's kinda hard to test things just from code 😏

You could try to remove

color: transparent;

from the @support media query in the meantime

best

Anton

[TYu]

Thanks for your reply Anton!

Currently I modify the size of the header to let it appear normally.

To re-produce this issue:

1. Go to this link with Safari https://www.palo-it.com/es/events/ideathon-4-good-techo

2. Then you right click to Inspect Elements

3. Scroll down to find the element as attached image 1. Click on it and check the style, you'll see the font-size is 1.7rem (see image1);

4. Change the size to 3rem to make it larger so it'll need to occupy two lines. Then you'll see the second line appear werid (see image2).

 

image1

image2

  

Let me know if this is clear, thank you 🙂

[Anton · Accepted solution]

Hi @TYu, 

I've tested your page on my Windows machine in Chrome, Firefox, Edge and IE(worst possible browser imo) 

result: I couldn't recreate this issue. 
On my mac on the other hand Safari was displaying the issue as you've described. 

Adding a "display: block" to the corresponding class fixed the issue in Safari. 

@supports (-webkit-background-clip: text) or (-moz-background-clip:text) or (background-clip:text) {
.custom-leaders .top-content h2 span{
background-image: linear-gradient(to top, rgb(22, 173, 248), rgb(120, 217, 244));
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
display:block;
}
}

best, 

Anton 

[TYu]

Hi @Anton ,

Your suggestion works!

Thanks a lot!

Best,

Tin