Pricing table styling issue in Pro Sites

Hi guys! I have got an interesting question for y'all. I am stuck in styling of my prosite pricing table since long but no results. The raw design can be hardly used and is really raw and unprofessional. Been trying to find some workarounds.
When I'd enabled my pricing table with some CSS the results looked like this: Screenshot from 2017-02-03 02-22-05.png
Please suggest some better CSS to make it responsive (it loads only the monthly tabs on mobiles and the rest on top of each other, overlapping badly) and more professional looking.

Another thing I found out was that after I disabled Pricing table by unchecking it, this look came in my pro sites page, which is much better and nicer but doesn't shows any of the features, which again is of no use to me.
Request to provide a solution which might let me make the features visible in the front end in this look (tables.png) which came after disabling pricing table, and seems a quite nice one.

Would be glad to get any css or other code suggestion on these as well. :slight_smile: Any of the above two points, if resolved shall be my lifesaver, literally. Promise to reward the right help with 70% of my WPMU DEV points. Just because I need this urgently and something professional looking, would be happy to give away my points, no regrets, to the solution that'd work for me! :*

  • Nithin

    Hey Arpita,

    Hope you are doing good today. :slight_smile:

    Another thing I found out was that after I disabled Pricing table by unchecking it, this look came in my pro sites page, which is much better and nicer but doesn't shows any of the features, which again is of no use to me.

    I'm afraid there isn't any out of the box settings available in the plugin, this would require a editing the core plugin files.

    If you are looking for CSS to make it responsive in mobile view, please try the following CSS code:

    .pricing-column .summary .price {
    	border-radius: 50%;
    	width: 85%;
    }
    
    @media screen and (max-width: 480px) {
    
    #prosites-checkout-table > ul.pricing-column {
    	width: 48.8% !important;
    }
    
    #prosites-checkout-table > ul.pricing-column.psts-level-0 {
    	width: 100% !important;
    }
    
    #prosites-checkout-table > ul.pricing-column.psts-level-0 > li.feature-section-wrapper {
    	display: none;
    }
    
    #prosites-checkout-table > .coupon-wrapper {
    	width: 100% !important;
    }
    
    #prosites-checkout-table > div > div > span > input[type="text"] {
    	margin: auto;
    }
    
    #prosites-checkout-table > ul.pricing-column.psts-level-0 > li.sub-title {
    	text-align: center;
    }
    
    }

    The above CSS should help with the tables being in responsive mode.

    If you are looking to make the pricing table responsive in all screen size, easiest would be to remove the sidebar, so that only the pricing table is visible. If that's what you prefer, you could try the following CSS:

    .singular-page-5 #sidebar-primary {
    
    	display: none;
    }
    
    .singular-page-5 #content {
        float: left;
        width: 100% !important;
    }

    However the use of !important declaration is not something which I would recommend, but in some cases's it's necessary to apply these rules to overwrite the existing styles. You can add the following CSS in the plugins Custom CSS section, under Pro Sites > Pricing Tables > Styling > Custom CSS.

    I hope this helps. Please advise, if I had missed out anything. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.