Recherches récentes

Pas de recherche récente

How to move a plan availability block and wrap text.

Avec réponse
image avatar

Nic Brown

Publication le 07 juil. 2021

Hi friends.  Writing help docs in our system.  

We have a plan availability block at the top of our page.  (For reference: https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules )

We'd like to make it so our billing plan block shifts to the right hand side of our docs and the text wraps around it... like the image below.  

 

Any thoughts on how we can accomplish this??  I'm pretty limited with my HTML knowledge, any help would be appreciated.

0

1

1 commentaire

Date
    image avatar

    Ifra Saqlain

    Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

    Hi Nic Brown,  you can try this method:

    1). HTML Code.

    <div class="main-wrapper">  
     <div class="callout callout--plan"> //Add CSS with this class to set this small block left/right
        <h4 class="callout__title">Plan availability:</h4>
        <p>
          The Default Routing Rule: <strong>All</strong> Drift plans.
        </p>
        <p>
          Conditional Conversation Routing rules: <strong>Premium</strong> plan
          and above.
        </p>
      </div>
      <p>
        We have a plan availability block at the top of our page.&nbsp; (For reference:&nbsp;<a style="background-color: #ffffff;" href="https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules" rel="nofollow noreferrer">https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules</a>&nbsp;)
        We have a plan availability block at the top of our page.&nbsp; (For reference:&nbsp;<a style="background-color: #ffffff;" href="https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules" rel="nofollow noreferrer">https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules</a>&nbsp;
        We have a plan availability block at the top of our page.&nbsp; (For reference:&nbsp;<a style="background-color: #ffffff;" href="https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules" rel="nofollow noreferrer">https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules</a>&nbsp;
        We have a plan availability block at the top of our page.&nbsp; (For reference:&nbsp;<a style="background-color: #ffffff;" href="https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules" rel="nofollow noreferrer">https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules</a>&nbsp;
        We have a plan availability block at the top of our page.&nbsp; (For reference:&nbsp;<a style="background-color: #ffffff;" href="https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules" rel="nofollow noreferrer">https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules</a>&nbsp;
        We have a plan availability block at the top of our page.&nbsp; (For reference:&nbsp;<a style="background-color: #ffffff;" href="https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules" rel="nofollow noreferrer">https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules</a>&nbsp;
        We have a plan availability block at the top of our page.&nbsp; (For reference:&nbsp;<a style="background-color: #ffffff;" href="https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules" rel="nofollow noreferrer">https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules</a>&nbsp;
        We have a plan availability block at the top of our page.&nbsp; (For reference:&nbsp;<a style="background-color: #ffffff;" href="https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules" rel="nofollow noreferrer">https://gethelp.drift.com/hc/en-us/articles/360019516713-Bot-Routing-Rules</a>&nbsp;
      </p>
    </div>

     

    2). Add CSS at your stylesheet.

    .callout.callout--plan{
    float: right;
        border: 1px solid #ddd;
        background-color: #eee;
        padding: 20px;
        margin: 10px;
    }

    .callout__title{
      background-color:black;
      padding:10px;
      color:#fff;
    }

     

     

    3). Output.

     

     

    Hope it work for you.

    Thanks

    0

    Cette publication n’accepte pas de commentaire.

    Vous ne trouvez pas ce que vous cherchez ?

    Nouvelle publication