Reply To: Two-Column Output

09/13/2016 at 10:13 am #391047
Steven Zahm
Keymaster

@ Mark

Oh, sorry, now I understand. I was approaching this from the viewpoint of the Enhanced Categories extension. Let me take another look…

Ok, I see you’re using the Default Card template (which is responsive, scaling to phone and tablets). This template does not display in a columnar layout. There are a few other templates which do. For example Circled, Gridder and Tile Plus. It seems like Tile Plus may be the best fit. You could enlarge the tile and turn on the display of the address and social networks. That way you would be displaying the same info. The number of columns would depend on the theme’s content width and the screen pixel width and the set size of the tile. The tile size itself would not change, only the number per row displayed.

If you want to display the Default Card in columns you can try the following CSS. Add it to the theme’s custom CSS area:

div#cn-list {
    width: 100% !important;
}

#cn-card #cn-list-body {
    width: 100%;
}

#cn-card .cn-list-row,
#cn-card .cn-list-row-alternate {
    box-sizing: border-box !important;
    display: inline-block;
    width: 50% !important;
    vertical-align: top;
}

#cn-card .cn-list-row:after,
#cn-card .cn-list-row-alternate:after {
    clear: both;
    content: "";
    display: table;
}

#cn-card .cn-list-row-alternate {
/*     margin-right: 10px; */
    max-width: calc( 50% - 10px ) !important;
}

#cn-card .cn-list-section-head {
    display: none;
}

#cn-card .cn-entry {
    box-sizing: border-box;
    width: 100% !important;
}

#cn-card .cn-entry > div:first-child,
#cn-card .cn-entry > div:first-child + div {
/*     display: inline-block; */
/*     float: none !important; */
/*     max-width: 50% !important; */
/*     vertical-align: top; */
}

#cn-card .cn-entry > div:first-child + div {
/*     width: 50%; */
}

You’ll need to tweak as desired and more importantly add CSS media queries to undo this so it turns back into a single column layout on small devices otherwise it will be very, very squished.

Hope that helps!