DB14

Hi @tuanphan, thanks for your answer! Yes exactly. On mobile version the line height spacing isn't very good between the pink words and the white text above and under. I can't seem to find how to adapt that to this section only. I found a way to adapt it but then it changed every header on my website.

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>