How to make the text smooth on the phone version?

Technical Q&A
,
1

Hi,

I have a custom liquid on Shopify where i use a dice roll effect to show 3 different sentences. However, on the phone version the line: ‘Geef je collectie de aandacht die ze verdient’ is not perfectly accurate in the display. How do i fix this? The website is www.vinup.nl

share_8262571937056571486.png
share_8262571937056571486.png1008×2244 191 KB

{% style %}
@import url('https://fonts.googleapis.com/css2?family=Times+New+Roman&display=swap');

.text-roll-container {
  height: 160px;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-family: 'Times New Roman', serif;
  margin: 20px auto;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  box-sizing: border-box;
}

.text-roll {
  animation: roll 9s cubic-bezier(0.23, 1, 0.32, 1) infinite;
  position: relative;
}

.text-roll span {
  display: block;
  height: 160px;
  line-height: 160px;
  color: #E19F67;
  font-size: clamp(24px, 5vw, 42px); /* Adjusted for better fit */
  font-weight: 400;
  letter-spacing: 1px; /* Reduced letter spacing */
  text-transform: uppercase;
  padding: 0 10px;
  white-space: nowrap;
}

/* Media query for mobile devices */
@media screen and (max-width: 768px) {
  .text-roll-container {
    height: 200px;
  }
  
  .text-roll span {
    height: 200px;
    line-height: 1.2;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-size: clamp(20px, 4.5vw, 32px);
  }
  
  @keyframes roll {
    0%, 26% {
      transform: translateY(0);
    }
    33%, 59% {
      transform: translateY(-200px);
    }
    66%, 92% {
      transform: translateY(-400px);
    }
    100% {
      transform: translateY(-600px);
    }
  }
}

/* Desktop animation */
@keyframes roll {
  0%, 26% {
    transform: translateY(0);
  }
  33%, 59% {
    transform: translateY(-160px);
  }
  66%, 92% {
    transform: translateY(-320px);
  }
  100% {
    transform: translateY(-480px);
  }
}

/* Fade effects */
.text-roll-container::before,
.text-roll-container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 2;
  pointer-events: none;
}

.text-roll-container::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}

.text-roll-container::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}
{% endstyle %}

<div class="text-roll-container">
  <div class="text-roll">
    <span>SPECIAAL VOOR ELKE VINYL LIEFHEBBER</span>
    <span>MEER DAN 5.000 KLANTEN GINGEN JE VOOR</span>
    <span>GEEF JE COLLECTIE DE AANDACHT DIE ZE VERDIENT</span>
    <span>SPECIAAL VOOR ELKE VINYL LIEFHEBBER</span>
  </div>
</div>
2

Hi @VinUp ,

The issue with the sentence not displaying correctly on mobile may be due to the line-height and padding applied in the mobile media query. Specifically, the line-height of 1.2 and the padding: 20px; might be causing the text to not align or display correctly.

Here are a few suggestions to fix the issue:

  1. Adjust the line-height for mobile devices to ensure the text fits properly inside the container.
  2. Reduce or modify the padding to avoid breaking the text.
/* Media query for mobile devices */
@media screen and (max-width: 768px) {
  .text-roll-container {
    height: 200px;
  }
  
  .text-roll span {
    height: 200px;
    line-height: 1.3; /* Adjust line-height to fit text properly */
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px; /* Reduced padding for better alignment */
    font-size: clamp(20px, 4.5vw, 32px);
  }
  
  @keyframes roll {
    0%, 26% {
      transform: translateY(0);
    }
    33%, 59% {
      transform: translateY(-200px);
    }
    66%, 92% {
      transform: translateY(-400px);
    }
    100% {
      transform: translateY(-600px);
    }
  }
}

You can try this updated CSS for the mobile view:

The line-height has been adjusted to 1.3, and the padding has been reduced to 10px to make sure the text fits better and aligns well on mobile. This should help fix the issue with the sentence on mobile.