Pro Sites Styling Table Messy

Dear WPMU, i realized regardless how i change the styling of the pro sites pricing table, the output is very messy. Check out:
https://admin.iamjaychong.com/business-sites/

Please assist. :slight_smile:

  • Adam Czajczyk

    Hello iamJayChong

    I hope you're well today and thank you for your question!

    I realize Pro Sites pricing tables can sometimes be a bit "difficult to work with". I checked your site and I see that they're not lining up well etc. As quick "basic fix" try this CSS please:

    .pricing-column {
      overflow:hidden;
      padding:0;
      margin:0 3px!important;
    }
    .pricing-column li {
      margin-left:0!important;
    }
    
    .psts-level-2 {
      width:27%!important;
    }

    However, if you got any specific look in mind, would you please point me to some example site with some (not necessarily Pro Sites) pricing table that's similar to what you wish to achieve (or share some "mockup" image here)?

    I'd be happy then to help you better with more CSS to make it closer to that.

    Kind regards,
    Adam

  • iamJayChong

    Dear Adam Czajczyk ! You're very helpful!! The CSS is working like a charm on desktop view!!

    Anyway, do you mind to advice me whether how can i "extract" the sign-up form & coupon code form so that i can put at other page? Reason behind is so that i can create the pricing table using other method (as per you mentioned the current pricing table is a bit tricky), which then i can redirect user to the sign-up form with coupon code box to sign up the package they selected?

    Cause the current challenge is the pricing table might not working as per our expectation on mobile view (as per attached file).

    Once again, thanks again for the CSS!

  • Predrag Dubajic

    Hi iamJayChong,

    You can add below CSS code to your site and it will set the columns at half width on tablets and such larger mobile screens, and on phones it will set them to full width:

    @media screen and (min-width: 624px) and (max-width: 988px) {
        #prosites-checkout-table .pricing-column {
            width: 48%!important;
        }
    }
    
    @media screen and (max-width: 470px) {
        #prosites-checkout-table .pricing-column {
            width: 100%!important;
        }
    }

    Anyway, do you mind to advice me whether how can i "extract" the sign-up form & coupon code form so that i can put at other page? Reason behind is so that i can create the pricing table using other method (as per you mentioned the current pricing table is a bit tricky), which then i can redirect user to the sign-up form with coupon code box to sign up the package they selected?

    I'm afraid that this is not possible out of the box and having this kind of registration steps would require a lot of changes and it would need to be custom developed.

    If you need to customize this then you can post a job on our jobs board where you can hire a developer to assist further:
    https://premium.wpmudev.org/wordpress-development/
    Please note that no WPMU official staff members are allowed to work on the job board.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.