Vor Kurzem aufgerufene Suchen

Keine vor kurzem aufgerufene Suchen

How to move a plan availability block and wrap text.

Beantwortet
image avatar

Nic Brown

Gepostet 07. Juli 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 Kommentar

Datum
    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

    Post ist für Kommentare geschlossen.

    Sie finden nicht, wonach Sie suchen?

    Neuer Post