What is the HTML or CSS inject for text layout around an image?

  • Profile Image
    HAPEN
    Asked on May 03, 2015 at 12:06 PM

    I have added a text box and using HTML editor added an image. Currently, working on the form, I have additional images to add and would like to know how to change the image/text layouts.

    1.  Have text below image.

    2.  Have text right aligned to the image.

    3.  Have text left aligned to the image.

    4.  Have text wrap around the image.

     

    I know there is HTML code to this, but when I add it using the textbox editor, it does not work.  Maybe I am missing something?

    Below is an example.  I would like the paragraph to be below the image with image and text left aligned.

     

     

    I did the same the same with the top image on the form by adding breaks for a WYSIWYG approach, but I know this is not correct.

    Thanks,

     

  • Profile Image
    Mike_G
    Answered on May 03, 2015 at 01:40 PM

    In order for you to accomplish this, you need to add some CSS codes to you Inject Custom CSS field under Preferences toolbar, Form Styles tab, of the Form Builder. 

    This is the code that you need to add: 

    #text_12 p:nth-child(2) {

    position:relative;

    float: left;

    }

    .form-all {

    height:1300px !important;

    }

    Click this to open the form I have edited already after cloning your form. You may also copy the Form URL so you could clone it.

    Here are the guides that might help you in following the instructions above.

    How-to-Inject-Custom-CSS-Codes

    How-to-clone-an-existing-form-from-a-URL

    If you have any question about the instructions above, please feel free to get back to us. Thank you.

  • Profile Image
    HAPEN
    Answered on May 03, 2015 at 02:29 PM

    Thanks Mike. I appreciate the response.

    At first it looked like the issue was resolved.  However, I thought it worked, but when viewing on different devices, there were inconsistent views.  Both in design and edit mode the bottom section was either not visible or exceeded the border.   I took out the CSS inject and added breaks.

  • Profile Image
    Shadae
    Answered on May 03, 2015 at 05:41 PM

    Hi,

    I do apologize that the code provided did not produce your desired results. I have reviewed your form from mobile view and it appears that you are getting the desired results after adding page breaks:

    Can you confirm that the issue has been resolved?

    Thank you.