Pro Sites Pricing Table Free SIte

Hi there,

I have been browsing the support forums here, and found a way through CSS to display the pricing table for Free Sites. However, as you can imagine with CSS, it displays differently with every browser and device. I would like a rock solid solution to displaying the Free Sites in the Pricing Table. Any suggestions? Thank you

    Blake

    Hi there,

    Here is a screenshot of my pricing table. Notice how the the FREE column is not formatted correctly, and I have been driving myself mad trying to make everything even.

    add_action( 'wp_footer', 'wp_footer_cb' );
    function wp_footer_cb(){
        ?>
        <script type="text/javascript">
        jQuery(function($) {
          var _link = $('#psts-free-option').attr('href');
          $('.free-plan-link-logged-in').remove();
          var html = '<ul style="width: 25%; " class="pricing-column psts-level-3 "><li class="title" style="height: 146px;">Free</li><li class="summary " style="height: 100px;"><div class="price price_1"><div class="plan-price original-amount"><span class="symbol">$</span><span class="whole">0</span><span class="dot">.</span><span class="decimal">00</span></div><div class="price-plain hidden plan-21-plain">$0.00</div><div class="period original-period">every month</div></div><li class="sub-title no-title " style="height: 89px;"></li><ul class="feature-section"><li class="feature feature-0 alternate" style="height: 80x;"><div class="feature-indicator"><span class="icon-tick"><p>2 Page Limit</p></span></div></li><li class="feature feature-1 " style="height: 70x;"><div class="feature-indicator"><span class="icon-cross"></span></div></li><li class="feature feature-2 alternate " style="height: 35x;"><div class="feature-indicator"><span class="icon-cross"></span></div></li></li><li class="feature feature-3  " style="height: 45px;"><div class="feature-indicator"><span class="icon-tick"></span></div></li></li><li class="feature feature-4 alternate " style="height: 55px;"><div class="feature-indicator"><span class="text">5MB</span></div></li></ul></li><li class="button-box"><button class="choose-plan-button choose-free-plan">Choose Plan</button></li></ul>';
          $('#prosites-checkout-table .free-plan-link').before(html);
          $('#prosites-checkout-table .free-plan-link').remove();
          $('#prosites-checkout-table > ul').css({
            width: '25%'
          });
    
          $('#prosites-checkout-table .choose-free-plan').click(function(e){
          	var parent = $( e.currentTarget ).parents( 'ul' )[ 0 ];
          	$( parent ).addClass( 'chosen-plan' );
            $( parent ).siblings( 'ul' ).addClass( 'not-chosen-plan' );
          	$('#prosites-signup-form-checkout').removeClass('hidden');
          });
    
        });
        </script>
        <?php
    }
    Michael Bissett

    Hey Blake, apologies for the delay here!

    While bearing our custom development policy in mind, here's some CSS code to get things started:

    @media only screen and (max-width: 560px) {
        #prosites-checkout-table ul.pricing-column > li.title {
            font-size: 1em;
        }
    }
    
    #prosites-checkout-table ul.pricing-column > li.title {
        height: 106px !important;
    }

    Had to use !important for the title (it's something that does have some use, but best used in certain cases, as this article notes), and had to set a smaller font on smaller screens (as there was a height mismatch otherwise).

    Kind Regards,
    Michael

    Blake

    As you can tell, the FREE level doesn't match up.

    Code: var html = '<ul style="width: 25%; " class="pricing-column psts-level-3 "><li class="title"

    style="height: 146px;">Free<li class="summary " style="height: 5px;"><div class="price

    price_1"><div class="plan-price original-amount"><span class="symbol">$</span><span

    class="whole">0</span><span class="dot">.</span><span class="decimal">00</span></div><div

    class="price-plain hidden plan-21-plain">$0.00</div><div class="period original-period">every

    month</div></div><li class="sub-title no-title " style="height: 89px;"><ul class="feature-

    section"><li class="feature feature-0 alternate" style="height: 90x;"><div class="feature-

    indicator"><span class="icon-tick"><p>2 Page Limit</p></span></div><li class="feature feature-1

    " style="height: 70x;"><div class="feature-indicator"><span class="icon-cross"></span></div><li

    class="feature feature-2 alternate " style="height: 35x;"><div class="feature-indicator"><span

    class="icon-cross"></span></div><li class="feature feature-3 " style="height: 45px;"><div

    class="feature-indicator"><span class="icon-tick"></span></div><li class="feature feature-4

    alternate " style="height: 80px;"><div class="feature-indicator"><span

    class="text">5MB</span></div><li class="button-box"><button class="choose-plan-button

    choose-free-plan">Choose Plan</button>';
    0-90px
    1-70px
    2-35px
    3-45px
    4-80px

    So, 0 and 4 I can change, but if I try to change the height of 1-3, then it doesn't change.

    Michael Bissett

    Hey Blake,

    do you have any suggestions for getting my rows lined up?

    You'll want to set the "height" value for each section for the "Free" level in that feature table. You may need to use the #prosites-checkout-table CSS ID, as seen in my earlier code.

    Font sizes are something you'll want to look at too, like the "2 Page Limit" text you've got for the Free level (it's being wrapped in a paragraph tag, rather than a div tag, and that will need to be taken into account).

    We've got a guide available for the Developer Tools in Chrome (my tool of choice), and would highly advise checking it out over here:

    https://premium.wpmudev.org/blog/chrome-developer-tools/

    ("Inspecting Elements" & "Working With CSS" sections are the sections you'll want to look at)

    You can test out your CSS changes live that way.

    Kind Regards,
    Michael