Jump to content

Marquee and section padding

Recommended Posts

Site URL: https://www.tribeandsol.com

Hi, 

I need help with the marquee on my page. I have a code in CSS that takes away underline from text on my site but it's not working for this code block on my homepage. I need a few tweaks to this code"

  • remove the underline from click to shop all.
  • reduce the space between top image and gallery
  • continuous text without it disappearing at the end I tried to add more text but it changed the speed to super fast 

It looks like this scrolling text: https://www.tribeandsol.com

 

1166121069_ScreenShot2021-10-31at4_24_18PM.thumb.png.ce9b6aa432d525004f7e3b711e66bc49.png

 

But I want it to look like this scrolling text with a background color: https://www.sigfusdesigns.com

1063870386_ScreenShot2021-10-31at4_27_14PM.thumb.png.ed10bdb850c66305c5fd09b90687aa25.png

 

 

Link to comment
1 hour ago, MoonMama said:

Site URL: https://www.tribeandsol.com

Hi, 

I need help with the marquee on my page. I have a code in CSS that takes away underline from text on my site but it's not working for this code block on my homepage. I need a few tweaks to this code"

  • remove the underline from click to shop all.
  • reduce the space between top image and gallery
  • continuous text without it disappearing at the end I tried to add more text but it changed the speed to super fast 

It looks like this scrolling text: https://www.tribeandsol.com

 

1166121069_ScreenShot2021-10-31at4_24_18PM.thumb.png.ce9b6aa432d525004f7e3b711e66bc49.png

 

But I want it to look like this scrolling text with a background color: https://www.sigfusdesigns.com

1063870386_ScreenShot2021-10-31at4_27_14PM.thumb.png.ed10bdb850c66305c5fd09b90687aa25.png

 

 

For the first and second point, you can add to Home > Design > Custom Css

.marquee a {
  background: none !important;
}

section[data-section-id="617cd72fcd9056094e9801e9"] .content-wrapper {
  padding-top:0 !important;
}

#block-yui_3_17_2_1_1635702870917_22085 {
  padding-bottom: 0;
}
#block-6a6aa8ebf6c7051a591e,#block-0403788e7bebb59f0144, #block-79c9f9fa6ed53ce13b95 {
  padding-top:0;
}
Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 10/31/2021 at 6:03 PM, bangank36 said:

For the first and second point, you can add to Home > Design > Custom Css

.marquee a {
  background: none !important;
}

section[data-section-id="617cd72fcd9056094e9801e9"] .content-wrapper {
  padding-top:0 !important;
}

#block-yui_3_17_2_1_1635702870917_22085 {
  padding-bottom: 0;
}
#block-6a6aa8ebf6c7051a591e,#block-0403788e7bebb59f0144, #block-79c9f9fa6ed53ce13b95 {
  padding-top:0;
}

Hi could you have a look I rearranged my home page and this code isn't working. I have two marquees and want the padding small on top and bottom of both.

Link to comment
On 11/4/2021 at 9:41 AM, MoonMama said:

Hi could you have a look I rearranged my home page and this code isn't working. I have two marquees and want the padding small on top and bottom of both.

Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

Hi I have this code for a scrolling marquee and i am trying to get it to infinity play across in one line but it is  not working.... Any ideas? @tuanphan?

.scroll{
  color:#E3DFD7;
  font-family:'Didot';
  background-color:black;
overflow: hidden!important;
 position: relative!important;
  display:flex;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 -moz-animation: scroll 20s linear infinite;
 -webkit-animation: scroll 20s linear infinite;
  animation: scroll 20s 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}

 

227956289_ScreenRecording2021-11-15at14_40_17.mov

Screenshot 2021-11-15 at 14.43.59.png

Edited by failbetter
forgot to tag
Link to comment
On 11/15/2021 at 9:44 PM, failbetter said:

Hi I have this code for a scrolling marquee and i am trying to get it to infinity play across in one line but it is  not working.... Any ideas? @tuanphan?

.scroll{
  color:#E3DFD7;
  font-family:'Didot';
  background-color:black;
overflow: hidden!important;
 position: relative!important;
  display:flex;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 -moz-animation: scroll 20s linear infinite;
 -webkit-animation: scroll 20s linear infinite;
  animation: scroll 20s 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}

 

227956289_ScreenRecording2021-11-15at14_40_17.mov 26.75 MB · 0 downloads

Screenshot 2021-11-15 at 14.43.59.png

Can you share your site with the protected password? So we can have a look at your issue

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.