Stop Text from Wrapping for Scrolling Text on Mobile Version

Hi there!

I currently have scrolling text animation on my website , however, both the desktop and mobile version wraps the text as seen in below photos. Can someone please help me to modify the below code so that the text stops wrapping all together on all screens? 

Thanks so much! 🙂

.scroll{font-family:Milestone; font-size:2.7rem; color: transparent!important; -webkit-text-stroke-width:
1px; -webkit-text-stroke-color: #FFFFFF; overflow: hidden!important;
position: relative!important;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 -moz-animation: scroll 15s linear infinite;
 -webkit-animation: scroll 15s linear infinite;
  animation: scroll 15s linear infinite;}

@-moz-keyframes scroll {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }

}
@-webkit-keyframes scroll  {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
#page {overflow-x:hidden}

On 4/16/2021 at 8:53 PM, Ruby-Rose said:

Hi there!

I currently have scrolling text animation on my website , however, both the desktop and mobile version wraps the text as seen in below photos. Can someone please help me to modify the below code so that the text stops wrapping all together on all screens? 

Thanks so much! 🙂

.scroll{font-family:Milestone; font-size:2.7rem; color: transparent!important; -webkit-text-stroke-width:
1px; -webkit-text-stroke-color: #FFFFFF; overflow: hidden!important;
position: relative!important;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 -moz-animation: scroll 15s linear infinite;
 -webkit-animation: scroll 15s linear infinite;
  animation: scroll 15s linear infinite;}

@-moz-keyframes scroll {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }

}
@-webkit-keyframes scroll  {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
#page {overflow-x:hidden}

Whatis your site url?

Hello! Thanks so much for getting back to me. 

https://casamaria.uk/ 

Password: Mooncake444

Let me know if you need anything else 🙂

Ruby

On 4/19/2021 at 4:07 PM, Ruby-Rose said:

Hello! Thanks so much for getting back to me. 

https://casamaria.uk/ 

Password: Mooncake444

Let me know if you need anything else 🙂

Ruby

Add to Design > Custom CSS

/* stop scrolling text wrap */
[data-section-id="607974dc60a5d11519835e5c"] .content {
    width: 100% !Important;
}

Hello! 

Thanks so much for your help however once the code has been inserted the desktop version still has one word that is wrapping and it hasn't worked at all for mobile version .. 😞  any other ideas? 

Thanks again 🙂
 

19 hours ago, Ruby-Rose said:

Hello! 

Thanks so much for your help however once the code has been inserted the desktop version still has one word that is wrapping and it hasn't worked at all for mobile version .. 😞  any other ideas? 

Thanks again 🙂
 

You can reduce text size, with this CSS

/* Animated text size */
.scroll {
    font-size: 2.2em !important;
}

You mean all text on same line on mobile? They will be very small

Hello! 

Thanks again for getting back to me. Your code helps me to make the text smaller however the text still wraps as seen in the screen shot below.... any other ideas? or do you think it's a fault with the original code? 
Thank you for your help so far 🙂

17 hours ago, Ruby-Rose said:

Hello! 

Thanks again for getting back to me. Your code helps me to make the text smaller however the text still wraps as seen in the screen shot below.... any other ideas? or do you think it's a fault with the original code? 
Thank you for your help so far 🙂

Use this to prevent wrap

/* Scrolling text */
.scroll {
    white-space: nowrap !important;
    font-size: 1.2em !important;
}