C Doug C Doug - 3 months ago 8
CSS Question

Removing columns from page affects alignment

Why when I delete an article class from http://www.shoperb.com/pricing (i.e a package), do the columns not centre back together?

Instead, deleting 1 or 2 creates white space in the middle of the page.

p.s style sheet available if needed - many thanks in advance :)



<div class='columns pricing-column large-3'>
<article class='plus'>

<ul class='pricing-table'>
<li class='title'>
Plus
</li>
<li class='price'>




Answer

Looks like you're using Zurb Foundation. If you want 3 columns instead of 4 columns, then you have to delete an entire column (not just the article element) and change the column class from "large-3" to "large-4" on the existing columns.

HTML

<section class="prices">
    <div class="row">
        <div class="columns pricing-column large-4">
            <article class="regular">
                <ul class="pricing-table">
                    <li class="title"> Regular </li>
                    <li class="price"> € <span class="js-price" data-price-biennially="22" data-price-monthly="29" data-price-yearly="24"> 29 </span>
                        <div class="month">
                            month
                        </div>
                    </li>
                    <li class="bullet-item first"> 1

                        GB of storage </li>
                    <li class="bullet-item"> 100

                        Products </li>
                    <li class="bullet-item"> 1

                        Staff Accounts </li>
                    <li class="bullet-item"> No Translations </li>
                    <li class="bullet-item"> 2.0%
                        transaction fee </li>
                    <li class="cta-button">
                        <form action="/sign-up" method="POST">
                            <input name="pricing_plan" type="hidden" value="regular">
                            <input class="js-payment-options" name="payment_option" type="hidden" value="price-monthly">
                            <button type="submit"> Start free trial </button>
                        </form>
                    </li>
                </ul>
            </article>
        </div>
        <div class="columns pricing-column large-4">
            <article class="professional">
                <ul class="pricing-table">
                    <li class="title"> Professional </li>
                    <li class="price"> € <span class="js-price" data-price-biennially="112" data-price-monthly="149" data-price-yearly="124"> 149 </span>
                        <div class="month">
                            month
                        </div>
                    </li>
                    <li class="bullet-item first"> 20

                        GB of storage </li>
                    <li class="bullet-item"> 5000

                        Products </li>
                    <li class="bullet-item"> 10

                        Staff Accounts </li>
                    <li class="bullet-item"> 4

                        Translations </li>
                    <li class="bullet-item"> 1.0%
                        transaction fee </li>
                    <li class="cta-button">
                        <form action="/sign-up" method="POST">
                            <input name="pricing_plan" type="hidden" value="professional">
                            <input class="js-payment-options" name="payment_option" type="hidden" value="price-monthly">
                            <button type="submit"> Start free trial </button>
                        </form>
                    </li>
                </ul>
            </article>
        </div>
        <div class="columns pricing-column large-4">
            <article class="enterprise">
                <ul class="pricing-table">
                    <li class="title"> Enterprise </li>
                    <li class="price"> € <span class="js-price" data-price-biennially="262" data-price-monthly="349" data-price-yearly="291"> 349 </span>
                        <div class="month">
                            month
                        </div>
                    </li>
                    <li class="bullet-item first"> 50

                        GB of storage </li>
                    <li class="bullet-item"> 50000

                        Products </li>
                    <li class="bullet-item"> 20

                        Staff Accounts </li>
                    <li class="bullet-item"> 6

                        Translations </li>
                    <li class="bullet-item"> 0.5%
                        transaction fee </li>
                    <li class="cta-button">
                        <form action="/sign-up" method="POST">
                            <input name="pricing_plan" type="hidden" value="enterprise">
                            <input class="js-payment-options" name="payment_option" type="hidden" value="price-monthly">
                            <button type="submit"> Start free trial </button>
                        </form>
                    </li>
                </ul>
            </article>
        </div>
    </div>
</section>

Here is my CodePen example