Support has been upgraded!
The Support Forum is closed. Not to worry! Providing the top quality support you expect and we're known for will continue! We're not ending support, just changing where you submit requests. This will provide you with the best experience possible.
Premium Support
Have you purchased an addon for Connections such as one of our premium templates or extensions with a valid license and you need help?
Please open a Support Ticket in your user account.
Free Support
Are you using the free Connections plugin? Don't worry, you are still very important to us! We are still providing you with the same high quality support that we're known for.
Please open a new support topic in the WordPress support forums for Connections.
Tagged: 8.5.24, column, css, enhanced categories
- This topic has 11 replies, 2 voices, and was last updated 6 years, 6 months ago by
Mark Hadfield.
-
AuthorPosts
-
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!
09/15/2016 at 3:37 pm #391595Mark Hadfield
Guestdude, you rock! Thank you for everything Steven, it looks great and renders perfectly as far as we are concerned.
Mark
-
AuthorPosts
You cannot reply to this support topic. Please open your own support topic.