Jump to content

How to adapt the line height for my custom code headline on mobile ?

Recommended Posts

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> 
 

Screenshot 2022-01-04 at 11.27.58.png

IMG_7586.PNG

Link to comment
  • Replies 3
  • Views 385
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 1/5/2022 at 2:58 AM, tuanphan said:

You mean reduce space between pink works - white text on mobile?

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.

 

Link to comment
17 hours ago, DB14 said:

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.

 

Hi,

"I found a way to adapt it but then it changed every header on my website." >> Which code did you use? We can target block id to apply code for animated text only

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.