CSS - linear-gradient background not showing

SOLVE
TYu
Member

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.

 

photo1.png

 

photo2.png

 

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;
}
}

 

 

0 Upvotes
1 Accepted solution

Accepted Solutions
Anton
Solution
Key Advisor | Diamond Partner

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 




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

6 Replies 6
Anton
Key Advisor | Diamond Partner

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




check
Did my post help answer your query? Help the Community by marking it as a solution



TYu
Member

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

image1.png

 

image2

image2.png

  

Let me know if this is clear, thank you 🙂

0 Upvotes
Anton
Solution
Key Advisor | Diamond Partner

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 




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

TYu
Member

Hi @Anton ,

 

Your suggestion works!

 

Thanks a lot!

 

Best,

Tin

webdew
Top Contributor | Diamond Partner

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.

0 Upvotes
TYu
Member

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!