Colored Checkmarks in Text Blocks

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

Hi there,

I am trying to color the check marks in the text block on the main page of my site. I tried this with a code block but did not like how the code block was displaying on mobile specifically. Is there a custom CSS code that can be entered to force the checkmarks in the text block to be colored?

Thank you!

password: boots135

It sounds like you may have come up with something similar to the following.

<style>

  .checkmark {
  
    color: red;
    
    }
    
  </style>

<p style="text-align: center;">

  <span class="checkmark">✓</span> Expert advice <span class="checkmark">✓</span> Actionable ideas <span class="checkmark">✓</span> Real results
  
  </p>

I couldn't see much difference in behaviour between a text and code block on mobile.

If you decide to go with a code block let us know how it goes.

11 hours ago, creedon said:

It sounds like you may have come up with something similar to the following.

<style>

  .checkmark {
  
    color: red;
    
    }
    
  </style>

<p style="text-align: center;">

  <span class="checkmark">✓</span> Expert advice <span class="checkmark">✓</span> Actionable ideas <span class="checkmark">✓</span> Real results
  
  </p>

I couldn't see much difference in behaviour between a text and code block on mobile.

If you decide to go with a code block let us know how it goes.

Hi Creedon,

My HTML code was a little different but that's essentially what it would look like, yes! I had code that would prevent the text block from wrapping to a second line which is why I was sticking with a text block. Is there code that can be added to this code block that would do the same?

58 minutes ago, gogreenmsu said:

Hi Creedon,

My HTML code was a little different but that's essentially what it would look like, yes! I had code that would prevent the text block from wrapping to a second line which is why I was sticking with a text block. Is there code that can be added to this code block that would do the same?

I was able to figure it out on mobile so that it doesn't wrap. So never mind!

Creedon,

Is there a way to have the three lines of text with checkmarks stack on mobile but remain side-by-side on desktop? Perhaps another thread is best for this question but figured that would look better on mobile.

Thank you!

4 hours ago, gogreenmsu said:

Is there a way to have the three lines of text with checkmarks stack on mobile but remain side-by-side on desktop? Perhaps another thread is best for this question

Flexbox is one possible solution.

It does make it easier to read the forum if there is one question per thread. Please create a new thread and we can move this part of the conversation over there.