Pro Sites CSS - pricing tables centering issues

On this page http://nonprofitlauncher.org/nonprofit-pro/?action=new_blog the "Monthly, quarterly, Annually" switch is not centered in mobile views. Additionally, the coupon box and "Free site" links are not centered in desktop views either.

Can you help with this?

Also, can we make the "Enter Coupon Code" text darker?

  • Ken Kimbrell

    Hello Josh-

    I see you have come to a roadblock on our Pro Sites plugin. Happy to help!

    Your first inquiry can be solved with some additional CSS. Keep in mind we do offer a massive amount of front-end options for styling your pricing table. You would just need to go to your wordpress dashboard and find Pro Sites > Pricing Tables > Styling. The custom CSS will need to be applied to the Custom CSS located at the bottom of the Styling options. See image below:

    You can find the custom CSS code below:

    /* Make container center on all viewport widths */
    
    .period-selector-container {
        width: 214px !important;
    }
    
    /* Make coupon input full width */
    
    #prosites-checkout-table .coupon-wrapper .coupon-box input {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* Make Enter Coupon Code Darker */
    
    #prosites-checkout-table .coupon-wrapper .coupon-box input::placeholder {
        color: #808080;
    }
    
    /* Add a background color to the coupon box */
    
    #prosites-checkout-table .coupon-wrapper .coupon-box {
        background: #ededed;
        /* Maybe lighten the border color around the coupon box? */
        border-color: #808080;
        width: 320px;
        margin: 0 auto;
    }
    
    /* Center free plan link */
    
    .free-plan-link {
        width: 320px !important;
        margin: 0 auto !important;
    }
    
    /* Adjust the margin of the featured box so it is not
       overlapping on mobile devices, give free link some
       padding, make the width of coupon box 100% to
       conform with various viewports */
    
    @media only screen and (max-width:960px) {
        ul.pricing-column.psts-level-2.featured .title {
            margin-top: 40px;
        }
        .free-plan-link {
            padding-top: 40px !important;
        }
        #prosites-checkout-table .coupon-wrapper .coupon-box {
            width: 100%;
        }
        .coupon-wrapper {
            width: 100% !important;
        }
    }

    ... Also, is it possible to place the "your site:" input box on the same line with .network domain ?

    I am afraid that is not possible without going in and reconstructing the markup of the HTML and doing some tweeks to the CSS styles, as each input field is contained within a specific element.

    Let me know if this helps!

    Take Care,

    Ken - WPMU DEV Support