Column formatting

  • Resolved smartleydunn

    (@smartleydunn)


    7 years, 1 month ago

    I am trying to create a menu page where the Sandwiches would appear at the top across two columns and Salads would appear across two columns below that. I looked at creating two different columns (one each with half of the sandwiches) but figured there’s got to be an easier way, so thought I’d ask.

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • 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,

    I was wondering if there was an update to this because – when i used this CSS hack, the titles will not align itself properly.

    Thanks in advance!

    ie. https://menu.dopenkitchen.com/project/viet/

    • This reply was modified 6 years, 10 months ago by gtwm.

    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,

    that’s awesome! worked a treat, but lastly, would be hard to make it back into 1 single column when it goes back to responsive mode for mobiles and such?

    Thanks heaps!!

    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 */
}

    Hi Nate,

    Thanks a bunch – i actually worked that out too! but strangely after A/B testing, the team liked the dual layout anyhow.

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Column formatting’ is closed to new replies.