Jump to content

Scroll is taking up two lines of text, is there a way to make it one continuous line?

Recommended Posts

Site URL: https://kale-clarinet-t64e.squarespace.com/

I injected an html code snippet and then styled it in css to scroll, everything is working perfectly except it's two lines of text instead of one continuous one, checkout the screenshot for reference. This is the code I used:

*I'm copying this website to practice my web design skills, so this is my desired look (7th section): https://www.vacation.inc/ *

HTML

<div class="scroll"> For full details including alternate means of entry see Official Rules — NO PURCHASE NECESSARY.Void where prohibited. Ends at 11:59:59 ET on 9/21/21. Open to legal residents of the U.S., 18+. </div> 

CSS

.scroll{
font-family: 'OptimaLTProItalic';
  color: #EBE6DC;
  overflow: hidden!important;
 position: relative!important;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 -moz-animation: scroll 25s linear infinite;
 -webkit-animation: scroll 25s linear infinite;
  animation: scroll 25s 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}

Screen Shot 2021-09-17 at 1.15.56 PM.png

Link to comment
  • Replies 1
  • Views 781
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.