CMS Development

TYu
Membro

CSS - linear-gradient background not showing

resolver

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 Avaliação positiva
1 Solução aceita
Anton
Solução
Especialista reconhecido(a) | Parceiro Diamante
Especialista reconhecido(a) | Parceiro Diamante

CSS - linear-gradient background not showing

resolver

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 

Anton Bujanowski Signature

Exibir solução no post original

6 Respostas 6
webdew
Orientador(a) | Parceiro Diamante
Orientador(a) | Parceiro Diamante

CSS - linear-gradient background not showing

resolver

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 Avaliação positiva
TYu
Membro

CSS - linear-gradient background not showing

resolver

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
Especialista reconhecido(a) | Parceiro Diamante
Especialista reconhecido(a) | Parceiro Diamante

CSS - linear-gradient background not showing

resolver

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

Anton Bujanowski Signature
TYu
Membro

CSS - linear-gradient background not showing

resolver

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 Avaliação positiva
Anton
Solução
Especialista reconhecido(a) | Parceiro Diamante
Especialista reconhecido(a) | Parceiro Diamante

CSS - linear-gradient background not showing

resolver

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 

Anton Bujanowski Signature
TYu
Membro

CSS - linear-gradient background not showing

resolver

Hi @Anton ,

 

Your suggestion works!

 

Thanks a lot!

 

Best,

Tin