How can I insert a divider between sections in a payment section?

  • Profile Image
    rickvv
    Asked on August 22, 2019 at 07:59 AM

    I have a shopping cart being set up, and we have 8 or 10 items.

    How can I insert a divider between two sections of the product section of the form?

    https://www.screencast.com/t/Matw2Fng

    Something like that screen shot (not necessarily a red divider....even an

    would do).

    Thanks!

    rickvv

  • Profile Image
    Jed_C
    Answered on August 22, 2019 at 09:34 AM

    What you can do is add a divider field and align it using CSS.

    1566480608The Easiest Online Form Builde

    Here's a sample output:

    1566480846The Easiest Online Form Builde

    Please add a divider and let us know once added and we'll provide the CSS code to align it according to where you want it to be placed.

    Looking forward for your response. 

  • Profile Image
    rickvv
    Answered on August 23, 2019 at 09:18 AM

    OK! Thanks...I didn't even think of the divider as a Form element.

    Now then... I have the divider added, but you're right about placement. It wont stay between my products...

    What is the CSS to place that correctly, please?

    Thanks!

    rickvv

  • Profile Image
    Jed_C
    Answered on August 23, 2019 at 09:28 AM

    Ty adding this CSS code :

    li#id_28 {

        position: absolute;

        top: 1344px;

    }

    I hope that helps. Let us know if you have any questions or if you need further assistance. 

  • Profile Image
    rickvv
    Answered on August 23, 2019 at 09:33 AM

    Awesome. Placed that divider right where it belongs.

    If I add or change items, I'll be able to fiddle with that positioning CSS now.

    Thanks very much!

    -rickvv

  • Profile Image
    rickvv
    Answered on August 23, 2019 at 09:36 AM

    It doesn't seem to show the divider in an iOS version of the page (iPhone 8+ ver 12.4). Is that normal?

  • Profile Image
    Jed_C
    Answered on August 23, 2019 at 09:54 AM

    Try adding the code below for mobile view:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    li#id_28 {

        position: absolute;

        top: 1529px;

    }

    }

    I hope that helps. Let us know if you have any questions or if you need further assistance. 

  • Profile Image
    rickvv
    Answered on August 23, 2019 at 10:22 AM

    This doesn't adjust for iOS...and it resets the HR above all the catalog items, when I preview form. (sorry to be a pain).


  • Profile Image
    Victoria_K
    Answered on August 23, 2019 at 11:19 AM

    I see some extra dots in the code of your form, so this could be the issue.

    Also, I can suggest to change top value from px to em, this should work better for all devices. Here is the code:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    li#id_28 {

      position: absolute;

      top: 111.5em;

    }

    }

    Also, I see you are using code only for mobile layout, so for desktop view divider is not moved.

  • Profile Image
    rickvv
    Answered on August 23, 2019 at 11:44 AM

    I'm using the new code that you sent, and took out the dots, but it's still not placing that divider in the right place between those sections.

    I'm getting confused on what's the mobile code, and the desktop code, and how we can get the divider placed correctly in both views.

    Thanks for your help.

  • Profile Image
    rickvv
    Answered on August 23, 2019 at 11:59 AM

    I'm starting to understand now. I added the original code I got, along with the mobile code you sent, and adjusting the absolute top ems number, to move that HR insto position between items.

    I think I get it now.

  • Profile Image
    Victoria_K
    Answered on August 23, 2019 at 12:02 PM

    You are right, I see there's now code for desktop and mobile, please feel free to adjust the values as per your needs.