Menu icon Foundation
How to suppress horizontal gap between columns

Hello !

I would like to know how to suppress the gap between to columns. Here is an image so you can understand what i'm saying :

Capture d e cran 2016 02 09 a  17.36.11

<ul class="row premier-niveau">
    <li class="column small-6 medium-4"><a>Accueil</a>
    </li>
    <li class="column small-6 medium-4"><a>Occasions</a>
        <ul class="sous-menu">
            <li><a>Sur parcelles</a>
            </li>
            <li><a>Au parc expo</a>
            </li>
        </ul>

    </li>
    <li class="column small-6 medium-4"><a>Nos services</a>
        <ul class="sous-menu">
            <li><a>Transport / grutage</a>
            </li>
            <li><a>SAV et installation</a>
            </li>
            <li><a>Financement</a>
            </li>
        </ul>
    </li>
    <li class="column small-6 medium-4"><a>Mobil Homes & Chalets</a>
    </li>
    <li class="column small-6 medium-4"><a>Déstockage</a>
    </li>
    <li class="column small-6 medium-4"><a>Terrasses et accessoires</a>
    </li>
    <li class="column small-6 medium-4"><a>Contact</a>
    </li>
</ul>

Basically, the first column takes up the whole height of the biggest column on the "row", but i would like columns to stack, even if there is a bigger column on the side of it.

Any ideas ?

Thanks

ResponsiveFoundationfoundationPressfoundation 6columncolumnsEqualizerheightrowToo bigstack columns

Hello !

I would like to know how to suppress the gap between to columns. Here is an image so you can understand what i'm saying :

Capture d e cran 2016 02 09 a  17.36.11

<ul class="row premier-niveau">
    <li class="column small-6 medium-4"><a>Accueil</a>
    </li>
    <li class="column small-6 medium-4"><a>Occasions</a>
        <ul class="sous-menu">
            <li><a>Sur parcelles</a>
            </li>
            <li><a>Au parc expo</a>
            </li>
        </ul>

    </li>
    <li class="column small-6 medium-4"><a>Nos services</a>
        <ul class="sous-menu">
            <li><a>Transport / grutage</a>
            </li>
            <li><a>SAV et installation</a>
            </li>
            <li><a>Financement</a>
            </li>
        </ul>
    </li>
    <li class="column small-6 medium-4"><a>Mobil Homes & Chalets</a>
    </li>
    <li class="column small-6 medium-4"><a>Déstockage</a>
    </li>
    <li class="column small-6 medium-4"><a>Terrasses et accessoires</a>
    </li>
    <li class="column small-6 medium-4"><a>Contact</a>
    </li>
</ul>

Basically, the first column takes up the whole height of the biggest column on the "row", but i would like columns to stack, even if there is a bigger column on the side of it.

Any ideas ?

Thanks

Rafi Benkual over 3 years ago

Columns are set to height auto, so they only take up the height of the content. You can see it here http://codepen.io/rafibomb/pen/mVaZMY

This is just how floats work. Imagine if it was a few lines of text, and you had one super tall letter in line, it would push the next line down by the highest letter.

Without JS or some crazy tricks I don't think this will be easy to change.

Marine Le Borgne over 3 years ago

Oh that's too bad..
Thank you for answering !