Adapt scrolling text on mobile view (Combine Theme)

Store Design
1

Hi, we are using a scrolling text element on our website which looks great on desktop version, but since we had to remove the top margin for it to look good on the desktop version, it now looks off in the mobile version.

In the desktop version speed and position is great, but in the mobile version the font is not horizontally centered (it “sticks” to the top of the bar) and the scrolling speed is too slow. So how do we:

1. Center the font in the blue bar horizontally in the mobile view?

2. Increase the scrolling speed of the text in the mobile view?

Madeleine4_0-1677748724262.jpeg
Madeleine4_0-1677748724262.jpeg1170×563 41.9 KB

Thank you!!

2

@Madeleine4

to adapt scrolling text height on mobile view follow this steps :

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
@media only screen and (max-width:1024px){
  .scrolling-text{
    z-index: 999 !important;
    top: 20px !important;
  }
}

For increase speed of scrolling text,

you need to change it from the code where you put this lines and increase time as you want

I attach an image here for make it easy for you.

infoatcodelab7_0-1677749926006.png
infoatcodelab7_0-1677749926006.png833×128 10.4 KB

Best Regards !

3

Hi, thanks so much, the height thing worked perfectly! For the speed of the text on the mobile page: I didn’t find the mentioned / screenshotted passage in the theme.css, could you tell me where I can adapt the mobile text scroll speed? Thank you!