Custom Text Sizing and Spacing

Is there a way to bring this text up, but keep the sizing the way it is (where the title is big and the rest of the text is smaller?)

Here is the current text/code I am using in the widget:

Blockquote


OPPORTUNITIES:

Thriving in conversation opens doors to new possibilities because it connects you with new people. The simple fact is, those who can talk well have options open to them that others do not.
  • RELATIONAL HEALTH:

    Flourishing personal, professional, and romantic relationships all root from organic and fluid conversations. The secret to long-lasting relationships is found in the ability to communicate well.
  • MONEY:

    People who can speak well in interviews and come across as confident tend land more jobs and more raises. They are also the ones who can network better and create more opportunities for future sales or employment
  •  

    Enroll Now!

    Blockquote

    Hi,

    Please try this CSS code below:

    @media (min-width: 768px){
        .home .textwidget li {
            display: -webkit-box;
            display: -moz-webkit-box;
        }
        .home .textwidget li p:first-child {
            width: 20%;
        }
    }
    

    Put the code into Custmize > additional CSS

    Regards,
    Awan

    It gets closer to what I want, but it ends up cutting the words off (I took it down since my site is live now, but here is a screen shot…)

    Any other ideas? Or any other suggestions on how to share this same information in a different way that might work better with this website template.

    Ah, I see… please replace the code in above using this:

    @media (min-width: 768px){
        .home .textwidget li {
            display: -webkit-box;
            display: -moz-webkit-box;
        }
        .home .textwidget li p{
        	max-width: 80%;
        }
        .home .textwidget li p:first-child {
            width: 20%;
        }
    }
    
    1 Like

    And is there a way to put the 3 headers centered above the 3 text sections if I wanted to do that? And make the headings blue (1268a5)?

    Hi,

    You are using text widget for those part. So, I think if you want to format like you mentioned, then you don’t need any CSS code.

    Regards,
    Awan

    That’s what I thought too-- but I could not get the font sizes to be different. What should I put in the text box of the widget? Here is what I have now…

    <ul>
    <li>
     <p style="font-size: 24px;">OPPORTUNITIES:</p>
    Thriving in conversation opens doors to new possibilities because it connects you     
    with new people.</li>
    <li>
    <p style="font-size: 24px;">RELATIONAL HEALTH:</p>
    Flourishing personal, professional, and romantic relationships all root from  the ability to communicate organically and fluidly.</li>
    <li>
    <p style="font-size: 24px;">MONEY:</p>
    People who can speak well in interviews come across as confident and tend land 
     more jobs, get more raises, and have bigger networks.</li>
     </ul>
    <a class="button centered-button" href="http://starconversations.com/membership-account/membership-checkout/?level=1">Enroll Now!</a>

    I see… try this please:

     
    <div style="text-align: justify;">
      <h3 style="text-align:center;">OPPORTUNITIES:</h3>
      <p>Thriving in conversation opens doors to new possibilities because it connects you     
    with new people.</p>
    
      <h3 style="text-align:center;">RELATIONAL HEALTH:</h3>
      <p>Flourishing personal, professional, and romantic relationships all root from  the ability to communicate organically and fluidly.</p>
    
      <h3 style="text-align:center;">MONEY:</h3>
      <p>People who can speak well in interviews come across as confident and tend land 
     more jobs, get more raises, and have bigger networks.</p>
     </br>
      <a class="button centered-button" href="http://starconversations.com/membership-account/membership-checkout/?level=1">Enroll Now!</a>
    </div>
    

    If you want all text to be centered, change this line:
    <div style="text-align: justify;">
    with this:
    <div style="text-align: center;">

    Regards,
    Awan

    1 Like

    Sorry, is there a way to get one more customization… Can I get the three sections broken up vertically? Something like this…

    Hi,

    I’ve checked your site but can’t find the page in above. Please share the URL.

    Yea: https://starconversations.com/

    It’s on the home page and it is the fifth widget section down.

    Here you go:

    <div style="text-align: center; color: inherit;">
      <div class="row">
        <div class="col-md-4">
          <h3 style="text-align: center; color: inherit;">OPPORTUNITIES:</h3>
          <p>Thriving in conversation opens doors to new possibilities<br>because it connects you with new people.</p>
        </div>
        <div class="col-md-4">
          <h3 style="text-align: center; color: inherit;">RELATIONAL HEALTH:</h3>
          <p>Flourishing personal, professional, and romantic relationships all root<br>
    from the ability to communicate organically and fluidly.</p>
        </div>
        <div class="col-md-4">
          <h3 style="text-align: center; color: inherit;">MONEY:</h3>
          <p>People who can speak well in interviews come across as confident and tend to<br>
    land more jobs, get more raises, and have bigger networks.</p>
        </div>
    </div>
    <p><a class="button centered-button" href="https://starconversations.com/membership-account/membership-checkout/?level=1" target="_blank" style="color: inherit;">Enroll Now!</a></p>
    </div>
    
    1 Like