Ricerche recenti

Nessuna ricerca recente

How to move a plan availability block and wrap text.

Con risposta
image avatar

Nic Brown

Data ultimo post: 07 lug 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 commento

Data
    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

    Il post è chiuso ai commenti.

    Non hai trovato quello che cerchi?

    Nuovo post