Column formatting

Hi @smartleydunn,

I think you’ll need to use some custom CSS code to get this working the way you want. The way I’d do it is to create a single-column menu, then use some CSS to float the items side-by-side.

This will do the trick for simple menus where all the items are the same height, but could look odd if you have items with significantly varied heights.

So if you’ve switched to a single-column menu, the following CSS might do the trick:

.fdm-menu .fdm-item {
    float: left;
    width: 50%;
}
.fdm-menu .fdm-item:nth-child(2n) {
    clear: left;
    padding-right: 1em;
}
.fdm-menu .fdm-item:nth-child(2n+1) {
    padding-left: 1em;
}

Hi @gtwm,

It looks like you just need to have the floats cleared. Try the following CSS:

.fdm-section::after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    font-size: 0;
    content: " ";
}

Hi @gtwm,

You’ll need to wrap that CSS code inside of a media query which targets larger screens, like this:

@media (min-width: 992px) {
  /* Add your CSS code here */
}