New to the community? Start here

Pricing Tables Broken

Hello I have installed and configured Pro Sites, but when I went to the page where is located the Pro Sites page, I see it looks kinda broken. Please take a look at the following link. http://pandotify.com/pandotify-plus/. Also I would like to know how can I create a Multi-Step Sign-Up configuration for new users. For example in separate but simple steps.

Step 1: Username, Email, Password, Confirm Password

Step 2: Site Name, Subdomain, Privacy (Index Site)

Step 3: Select membership and Select a template.

Sun, 27 Jan 2019 7:18:57
  • Kasia Swiderska
    • Support nomad

    Hello Eduardo,

    Looks like styles from theme used on the site are overriding Pro Sites CSS. Please try adding this code:

    .col-inner #prosites-checkout-table ul li {margin-left: 0;}

    it should fix the table.

    You can add it in " Pro Sites Pricing Table " -> Styling in the CSS box

    [attachments are only viewable by logged-in members]

    Also I would like to know how can I create a Multi-Step Sign-Up configuration for new users.

    I'm afraid there is no option for changing how the signup form looks like in the Pro Sites. It would require custom coding.

    But we are preparing Forminator to have registration forms, so I have sent a message to Frominator developers if it would be possible to create integration with Pro Sites and this way it would allow for the sign-up form customizations.

    kind regards,

    Kasia

  • Eduardo
    • Flash Drive

    Thank you so much, it worked. Now if you don’t mind, is there anyway to show the just 2 columns in mobile, for example 1 column would of be the “Features” and the other would show 1st pricing table, then once they scroll down, they would see 2nd pricing table same way as the first one with 2 columns, so basically the only thing that would be scrolled are the pricing tables. I don’t know if I explained myself correct.

  • Rupok
    • Ex Staff

    Hi Eduardo,

    Thanks for asking. Can you please put the following custom CSS code in Dashboard > Appearance > Customize > Additional CSS section and save?

    @media only screen and (max-width: 480px){
    
ul.pricing-column {
    
width: 33% !important;
    
margin-bottom: 20px;
    
}
    
}

    It should serve your purpose if I understood your request correctly.

    Please let us know if this is not what you needed. We will be very glad to assist further.

    Regards,

    Rupok

    • Rupok
      • Ex Staff

      Hi Eduardo,

      I’m so sorry but I’m not sure if I understood your question properly. Can you please explain a little more so we can assist you better?

      I’m looking forward to hearing from you and resolving this issue as soon as possible.

      Regards,

      Rupok