Búsquedas recientes

No hay búsquedas recientes

How to move a plan availability block and wrap text.

Respondidas
image avatar

Nic Brown

Publicado 07 jul 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 comentario

Fecha
    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

    La publicación no admite más comentarios.

    ¿No encontró lo que buscaba?

    Nueva publicación