Tachyons CSS: Responsive line of buttons

Question

My site

I have built a conference website with the Tachyons framekwork. The page has a row of buttons that should be responsive according to the page width.

My problem

The button row looks great in full desktop width and in narrow (<450px) width, but fails at the 500-700px wide range - buttons are not rearranged in two rows, as expected. This looks horrible in mobile devices.

Full width

500-700px wide

Mobile (< 450 px)

Code

<div class="relative absolute-ns bottom--2-ns w-100 vh-20-ns bg-black-80 avenir pv3 pt0-ns mt3 mt0-ns">
    <div class="f4 f2-ns near-white avenir tc">
        <p>One Day. One Track. One Community.</p>
    </div>
    <div class="dt-ns center">
        <div class="dt-row-ns w-100 tc">

            <div class="dtc-ns pa2">
                <a href="#about">
                    <button id="cfp-button" type="button" class="f5 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 br2 b--black bg-near-white">
                        About
                    </button>
                </a>
            </div>

            <div class="dtc-ns pa2">
                <a href="https://www.eventbrite.com/e/serverless-days-tlv-tickets-44959103890">
                    <button id="tickets-button" type="button" class="f5 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 blue bg-near-white">
                        Register
                    </button>
                </a>
            </div>

            <div class="dtc-ns pa2">
                <a href="#speakers">
                    <button id="speakers-button" type="button" class="f5 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 br2 b--black bg-near-white">
                        Keynotes
                    </button>
                </a>
            </div>


            <div class="dtc-ns pa2">
                <a href="#cfp">
                    <button id="cfp-button" type="button" class="f6 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 br2 b--black bg-near-white">
                        Call for Papers
                    </button>
                </a>
            </div>

            <div class="dtc-ns pa2">
                <a href="#sponsors">
                    <button id="sponsor-button" type="button" class="f5 link dim br3 ph3 pv2 mb2 dib pv3-ns w4 br2 b--black bg-near-white">
                        Sponsors
                    </button>
                </a>
            </div>
        </div>
    </div>
</div> 

My question

How can I make the button row fully responsive, so that it would split to 2 or more rows as the page is narrowed?

Answer 1

I recommend flex box as a quick solution here! You can drop the "dtc-ns" classes from the children.

<div class="w-100 flex flex-wrap justify-center">
    <div class="pa2"></div>
    <div class="pa2"></div>
    <div class="pa2"></div>
    <div class="pa2"></div>
    <div class="pa2"></div>
</div>

From ~576-719px, this view will display as a row of 4 with 1 on the bottom.

One way to achieve row of 3, row of 2 is to set the width for "medium" viewports on the children; "w-30-m" works well in this case.

<div class="pa2 w-30-m"></div>