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

Site URL: http://www.takebackyourcareerpodcast.com

Hi there,

I am trying to break the three checkmarks on my home page into three separate lines on mobile only while retaining the side-by-side format on desktop. Is there a way to do this? The text is all done through a code block.

password: boots135

Thank you!

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.