CODEWITHSUNDEEP
htmlcssmobile
Anthon Wansland
Anthon Wansland

Reputation: 1

Scrolling Marquee Text cuts out on mobile

I'm having a problem with my code for mobile that keeps cutting out once it reaches the end of the screen to the opposite direction of the scrolling (left).

I'm using Wix (unfortunately) where code needs to be loaded via a widget from an URL. I've got that sorted though- so that shouldn't be the issue. I'm rather thinking it is the code because it works flawlessly on desktop.

The max pixel width I can use- or rather, should use is 325 px, hence the width.

CSS below

@font-face {
    font-family: 'akira';
    src: url('./assets/142-webfont.woff2') format('woff2'),
         url('./assets/142-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .marquee {
    width: 325;
    background: rgba(0, 0, 0, 0);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
  }
  
  .marquee div {
    font-size: 12px;
    font-family: 'akira';
    padding-left: 100%;
    display: inline-block;
    animation: animate 20s linear infinite;
  }
  
  @keyframes animate {
    100% {
      transform: translate(-100%, 0);
    }
  }

HTML HERE

<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <div class="marquee">
        <div>As of current, Ytems®, is a non-profit organization.
             We sell our products at a breakeven profit. 
             Enjoy designer apparel for minimum costs. </div>
      </div>      
</html>

Upvotes: 0

Views: 1178

Answers (1)

Rob Moll
Rob Moll

Reputation: 3453

Change the marquee width to 100% or 325px depending on your needs. There are 2 snippets below - one at 100% and the other at 325px. See the comment in .marquee.

@font-face {
  font-family: 'akira';
  src: url('./assets/142-webfont.woff2') format('woff2'), url('./assets/142-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.marquee {
  width: 100%;  /*--------------------- changed from 325 (invalid) to 100%*/
  background: rgba(0, 0, 0, 0);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.marquee div {
  font-size: 12px;
  font-family: 'akira';
  padding-left: 100%;
  display: inline-block;
  animation: animate 20s linear infinite;
}

@keyframes animate {
  100% {
    transform: translate(-100%, 0);
  }
}
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
</head>
<div class="marquee">
  <div>As of current, Ytems®, is a non-profit organization. We sell our products at a breakeven profit. Enjoy designer apparel for minimum costs. </div>
</div>

</html>

I see that you mention in your question that you want it to be 325px wide. Your setting of width: 325 is invalid. I changed it to width: 325px in the snippet below:

@font-face {
  font-family: 'akira';
  src: url('./assets/142-webfont.woff2') format('woff2'), url('./assets/142-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.marquee {
  width: 325px;  /*--------------------- changed from 325 (invalid) to 325px */
  background: rgba(0, 0, 0, 0);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.marquee div {
  font-size: 12px;
  font-family: 'akira';
  padding-left: 100%;
  display: inline-block;
  animation: animate 20s linear infinite;
}

@keyframes animate {
  100% {
    transform: translate(-100%, 0);
  }
}
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
</head>
<div class="marquee">
  <div>As of current, Ytems®, is a non-profit organization. We sell our products at a breakeven profit. Enjoy designer apparel for minimum costs. </div>
</div>

</html>

Upvotes: 1

Related Questions