CSS rotating words margin adjustment on mobile only

Site URL: https://loesencial.mx/shop/

Hello, 

I have an issue with some CSS custom code I have on my webpage. 

When on desktop, the adjustment and margins works fine, it is centered. But the problem is on mobile I can't seem to make it adjust properly, and it hyphenates the animated word making it look terrible (I'm attaching a screenshot of my issue) Even on tablet the spacing makes it align to the left rather than centered.

Is there a way to set the animated text to scale only on mobile to avoid that hyphenation? I'd prefer a line break, but a scale down would work too. I'm on Brine on 7.0.

Thanks in advance!

Hi. Can you send a screenshot?

Hi! To prevent text from applying hyphens add this custom css:

.rotating-words span {
  hyphens: none;
}

In my opinion the rotating words is coded little wonky and not that scalable. Each span word has position: absolute; for mobile since the text will go off-screen due to the length of the sentence and position: absolute; I would make the rotating words be display: block;  on mobile only. Some quick adjustments to span as well. Note: I only used 375px here b/c after that the rotating words look strange. I could code up a more scalable version if you want. 

.rotating-words {
  @media (max-width: 375px) {
    display: block;
    
    span {
      left: 0;
      right: 0;
      text-align: center;
    } 
    
  } 
}