Custom font with custom interaction --line break problem

Newb here creating my first website. I used custom code for the font and used the custom interaction below to create a colorful hover over my heading. 

Code: 

<h1 class="text-hover">
UX DESIGNER.<br>
STORYTELLER.<br>
MULTI-PASSIONATE HUMAN.<br>
</h1>

  //HERO COLOR HOVER//
.text-hover span {
  transition: color 3s;
  transitions-delay: 1s;
} 

.text-hover span:hover {
  transition: color 0s;
}

.text-hover span:nth-child(1n):hover {
  color: #FE9C37;
}

.text-hover span:nth-child(2n):hover {
  color: #DA6026;
}

.text-hover span:nth-child(3n):hover {
  color: #114155;
}

.text-hover span:nth-child(4n):hover {
  color: #3B97B6;
}

.text-hover span:nth-child(5n):hover {
  color: #693237;
}
 

Everything looks great in the editor but on the live site there aren't any line breaks. I put in the break but I am unsure of the problem.

See below:

Can you share your website URL?

https://duck-sheep-gyj3.squarespace.com/ /SD$$$2023

The homepage heading text looks quite different to the screenshots, I think that the reason the <br> doesn't work is because of the code, I would suggest that the best way to go may be to split the heading into separate <h1></h1> tags.

Ok thank you for that. It worked but now there is a line spacing issue. Is there a way to get this back to a single space?

Use this Custom CSS:

#block-yui_3_17_2_1_1687554392099_9251 {
  h1 {
    margin: 0.5rem 0;
  }
}

You sir, are a wizard. I could kiss you on your mouth rn. Thank you thank you!!

31 minutes ago, identifyasaproblem said:

You sir, are a wizard. I could kiss you on your mouth rn. Thank you thank you!!

Just happy to help!

On 7/12/2023 at 1:15 PM, Ziggy said:

Use this Custom CSS:

#block-yui_3_17_2_1_1687554392099_9251 {
  h1 {
    margin: 0.5rem 0;
  }
}

Hey there! Me again 😞

I decided to copy this section from my homepage to move to my portfolio page. I think it is best to make my portfolio page my homepage. This interaction still works but the text is back with a vengeance double spaced. Can you help me again with the CSS?

You can use this for identifying IDs:

https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

This should help for that page:

#block-fafab00fb6f0b32d06cf {
  h1 {
    margin: 0.5rem 0;
  }
}

Thank you will try this now but I'd love clarification. Does this go in the advanced area of the portfolio page? Or should I copy this over the other code in the design custom ccs code area? Does it matter?

Add it to the end of Custom CSS, you can delete the previous if you're no longer using it.

You know Ziggy you are not Kellogg's mascot for Frosted Flakes, Tony the Tiger, but you're GREEAAT!! Thanks again!

Hahahahahaha thank you!

On 7/12/2023 at 1:15 PM, Ziggy said:

Use this Custom CSS:

#block-yui_3_17_2_1_1687554392099_9251 {
  h1 {
    margin: 0.5rem 0;
  }
}

Hi Ziggy! About an hour ago I saw that my custom code for my whole site had vanished. I don't know what happened. One minute it was there and then everything was gone. I couldn't find it in the wayback machine so I am starting from square one after some light crying. I now have a text edit file with my code. I am lucking that I am so terrible at this that most of my custom code had problems so I have a record of my code fails here 🙂

My custom fonts are reloaded, I am rebuilding my hero section now and I am having this line break issue again. Even with your code above. I am not sure the issue this time.  Can you eyeball again?

On 10/9/2023 at 3:21 AM, Ziggy said:

Not sure if this is correct, but you need to update the block ID

#block-fafab00fb6f0b32d06cf {
  h1 {
    margin: 0.5rem 0;
  }
}

If your CSS completely disappears (or appears to) then don't start typing it back in from memory and click save, exit the page without doing anything. Generally what's happened is that the CSS editor just didn't fully load, BUT if you save it blank or with a few new lines it can override all of the saved data.

I haven't seen this very often, but it's never actually disappeared.

I would also recommend backing up your Custom CSS somewhere.

Once again you have saved the day and peppered in some helpful tips. I think exactly what you described happend because I had the live site open and it looked fine. Next time I will exit if it happens again but best believe I now have a backup. In my defense when I started I did have a doc with the first few codes that I did but I stopped editing it as I went along. So I didn't have nothing. I was able to recover 70% via this forum and my early doc. I have to learn things the hard way it seems. 

I have a few other code issues on the forum, if you have time can you take a look? Nw, if not. Thanks again! I will be putting some coin in your purse regardless xx