Site URL: https://www.nommad.be/
Hi Everyone,
First time I'm actually posting a question myself on this forum but have already learned a lot from previous questions here.
I've added an animated headline on my website. Everything looks good on desktop version, but on the mobile version the line-height between the pink words and the white words isn't correct. I've tried multiple things but nothing changes. I'm not a developer, what I was able to code here is just copy and paste and changing some things reading a lot on forums like this one.
Could someone help me trying to figure out what I should do / add / change / delete here to be able to have the same line-height on mobile version as well please? My website is: https://www.nommad.be. I've also added the CSS code and HTML code I used below.
Thanks in advance,
Best Regards and happy new year!
Dom
Here is the custom CSS I used:
.fadeIn{
display: inline;
line-height: 0.4;
}
.fadeIn div{
animation: fadeEffect 7.5s linear infinite 0s;
-ms-animation: fadeEffect 7.5s linear infinite 0s;
-webkit-animation: fadeEffect 7.5s linear infinite 0s;
color: #FF31CA;
opacity: 0;
position: absolute;
}
.fadeIn div:nth-child(2){
color: #FF31CA;
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.fadeIn div:nth-child(3){
color: #FF31CA;
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
And this is the custom coding I used for my header:
<h1 style="white-space:pre-wrap;">the most powerful natural</h1>
<h1> <div class="fadeIn">
<div>cleaners</div>
<div>degreasers</div>
<div>deodorizers</div> </h1>
<br><h1 style="white-space:pre-wrap;">for your business</h1>