Jump to content

Looping rotating words - FIX THE WRAPPING

Go to solution Solved by Mark.Hook,

Recommended Posts

  • Replies 10
  • Views 633
  • Created
  • Last Reply

Top Posters In This Topic

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?

Screenshot 2023-03-20 at 3.21.48 PM.png

Link to comment
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

Link to comment

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;
}
}

 

Lead Developer at [Hook Creative][1] in Springfield, MO. [1]: http://www.hookcreative.co

Link to comment
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.

Screenshot 2023-03-24 at 2.36.25 PM.png

Link to comment

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;
    }
}

 

Lead Developer at [Hook Creative][1] in Springfield, MO. [1]: http://www.hookcreative.co

Link to comment
  • Solution

Ok, sorry for all the responses, but this code should actually work better. It's very similar to what's above, but a bit more sound.

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

    span.sp-words-wrapper {
        width: 500px !important;
    }

    h6.sp-headline.slide {
        margin-top: 20px;
    }
    .sp-words-wrapper b {
        white-space: nowrap !important;
    }
}

 

Lead Developer at [Hook Creative][1] in Springfield, MO. [1]: http://www.hookcreative.co

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.