css Looping rotating words - FIX THE WRAPPING

Hey all -

I started helping this client with the wrong code for the looping rotating text in their subheader. I've been able to fix most of it except it's wrapping on mobile but wrapping incorrectly on desktop (780+).

There's also too much padding between the header and the subheader.

Could someone please help?

https://packtraining.com/

7 minutes ago, geearias said:

Hey all -

I started helping this client with the wrong code for the looping rotating text in their subheader. I've been able to fix most of it except it's wrapping on mobile but wrapping incorrectly on desktop (780+).

There's also too much padding between the header and the subheader.

Could someone please help?

https://packtraining.com/

Oops. Looks like something I did is causing this big error as well. See screenshot attached. HUGE padding before the website appears. Only seems to be happening on desktop? Help?

19 minutes ago, geearias said:

Hey all -

I started helping this client with the wrong code for the looping rotating text in their subheader. I've been able to fix most of it except it's wrapping on mobile but wrapping incorrectly on desktop (780+).

There's also too much padding between the header and the subheader.

Could someone please help?

https://packtraining.com/

Looking to get some urgent help on the above @tuanphan

Bumping this up to hopefully get some help!

@creedon any chance you could help? Thanks in advance!

Try plugging this into your Custom CSS and see if it does the trick for you...

@media screen and (min-width:800px) {
.sp-headline.slide span {
    vertical-align: top;
}

span.sp-words-wrapper {width: calc(100% - 250px) !important;}

h6.sp-headline.slide {
    margin-top: 20px;
}
}

1 minute ago, Mark.Hook said:

Try plugging this into your Custom CSS and see if it does the trick for you...

@media screen and (min-width:800px) {
.sp-headline.slide span {
    vertical-align: top;
}

span.sp-words-wrapper {width: calc(100% - 250px) !important;}

h6.sp-headline.slide {
    margin-top: 20px;
}
}

 

Thanks for the help. Unfortunately, it made it wrap into 3 lines now. See attached.

Can you give me a screenshot of the whole page?

Actually, I may know what's happening. Try this and see if it gets it closer...

@media screen and (min-width:800px) {
    .sp-headline.slide span {
        vertical-align: top;
    }

    span.sp-words-wrapper {
        width: 550px !important;
        white-space:norwrap !important;
    }

    h6.sp-headline.slide {
        margin-top: 20px;
    }
}

Thank you @Mark.Hook!