Jump to content

Line Break in Code Block Text on Mobile Only (7.1)

Recommended Posts

  • Replies 1
  • Created
  • Last Reply

It looks like you have a start on a Flexbox implementation.

Here is an alternative. I'm not suggesting this is a better solution just different. It takes off from your horizontal code.

<style>

  .colored-checkmark-text-mobile {
  
    display: none;
    text-align: center;
    
    }
    
  .colored-checkmark-text-desktop h4,
  .colored-checkmark-text-mobile h4
  
    {
    
      transition-delay: 0.28125s;
      transition-duration: 0.9s;
      transition-timing-function: ease;
      
      }
      
  .colored-checkmark-text-desktop {
  
    text-align: center;
    white-space: nowrap;
    
    }
    
  .colored-checkmark-text-desktop span::before,
  .colored-checkmark-text-mobile h4::before
  
    {
    
      color: #e02d58;
      content: '✓';
      margin-right: 0.25rem;
      
      }
      
  @media only screen and ( pointer: coarse ) and ( max-width: 1024px ),
  screen and ( max-width: 799px )
  
    {
    
      .colored-checkmark-text-desktop {
      
        display: none;
        
        }
        
      .colored-checkmark-text-mobile {
      
        display: block;
        
        }
      }

  </style>

<h4 class="colored-checkmark-text-desktop preFade fadeIn">

  <span>Expert advice</span> <span>Actionable ideas</span> <span>Real results</span>
  
  </h4>

<div class="colored-checkmark-text-mobile">

  <h4 class="preFade fadeIn">
  
    Expert advice
    
    </h4>
    
  <h4 class="preFade fadeIn">
  
    Actionable ideas
    
    </h4>
    
  <h4 class="preFade fadeIn">
  
    Real results
    
    </h4>
    
  </div>

There are two versions of code. One horizontal and one vertical. Then the media query  turns the versions on/off.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.