Heading 1 Gradient - cut-off text - css

Site URL: https://enlightenedleaders.squarespace.com/

Hello there, I am using the following code to target certain h1's to turn into gradient text...

//heading 1 gradient//
#block-yui_3_17_2_1_1637561652735_9183
h1 {
background: -webkit-linear-gradient(45deg, #5b86e5, #36d1dc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

site password is: MVLF

My issue being that the gradient is not filling the entire word. See screenshots of cut-off text...

Please help and thank you

You can set height for h1

@media screen and (min-width:641px) {
div#block-yui_3_17_2_1_1637561652735_9183 h1 {
    display: block;
    min-height: 140px;
}
}

Thank you, it worked great on desktop view.

How do I fix this for mobile view? 

20 hours ago, earthwindflowermoon said:

Thank you, it worked great on desktop view.

How do I fix this for mobile view? 

Use this for mobile

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1637561652735_9183 h1 {
    display: block;
    min-height: 90px;
}
}

Thank you again!!