Jump to content

Colored Checkmarks in Text Blocks

Recommended Posts

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

Screen Shot 2020-11-04 at 7.35.22 PM.png

Link to comment
  • Replies 4
  • Views 2.4k
  • Created
  • Last Reply

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.

2132716355_ScreenShot2020-11-04at5_18_44PM.png.0b61cbe54a81e371254c3698a464d4b9.png

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

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

2132716355_ScreenShot2020-11-04at5_18_44PM.png.0b61cbe54a81e371254c3698a464d4b9.png

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?

IMG_078577FEA428-1.jpeg

Link to comment
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?

IMG_078577FEA428-1.jpeg

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!

 

IMG_B964DB83455E-1.jpeg

Link to comment
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.

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.