Jump to content

CSS rotating words margin adjustment on mobile only

Recommended Posts

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!

 

 

Link to comment
  • Replies 2
  • Views 249
  • Created
  • Last Reply

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;
    } 
    
  } 
}

 

 

https://www.nickscola.com - Squarespace developer since 2007 now a full service creative agency in Chicago that focuses on creating websites with a high standard for aesthetic excellence.

Link to comment
  • Susana_SQSP changed the title to CSS rotating words margin adjustment on mobile only

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.