Title: Multiple Column Custom View Last modified: August 30, 2016 --- # Multiple Column Custom View * [compumatter](https://wordpress.org/support/users/compumatter/) * (@compumatter) * [10 years, 7 months ago](https://wordpress.org/support/topic/multiple-column-custom-view/) * Hello. Thanks for this wonderful tool. * I wish to create a two column list of staff members and am uncertain how to code that. * Can you give me a brief on the content of the template that might create this within the loop to end up with something like this: * ————–|————- Position |Position Photo |Photo Description |Description | | | ————– |————- Position |Position Photo |Photo Description |Description | | | ————–|————- * Thank you for your consideration of this. * Jay Lepore CompuMatter * [https://wordpress.org/plugins/staff-directory/](https://wordpress.org/plugins/staff-directory/) Viewing 7 replies - 1 through 7 (of 7 total) * Thread Starter [compumatter](https://wordpress.org/support/users/compumatter/) * (@compumatter) * [10 years, 7 months ago](https://wordpress.org/support/topic/multiple-column-custom-view/#post-6435431) * I guess I should have commented the code properly. * This is the view I was talking about 😉 * ``` --------------|------------- Position |Position Photo |Photo Description |Description | | | --------------|------------- Position |Position Photo |Photo Description |Description | | | --------------|------------- ``` * Thank you for your consideration of this. * Jay Lepore CompuMatter * [dmkjr](https://wordpress.org/support/users/dmkjr/) * (@dmkjr) * [10 years, 7 months ago](https://wordpress.org/support/topic/multiple-column-custom-view/#post-6435658) * Hello Jay, You can use this code to get what you want, or close enough and then adjust. *
**
[name]
**
_[position]_
Phone: [[phone_number]](https://wordpress.org/support/topic/multiple-column-custom-view/[phone_number]?output_format=md)
Email: [[email]](https://wordpress.org/cdn-cgi/l/email-protection?output_format=md#8bd0eee6eae2e7d6)
* Then use the following CSS. You will see I added something for screen sizes to make it appear on cell phone’s as 1 row to keep a responsive touch. * —– * #one-person { width:25%; text-align:center; margin-bottom: 20px; float: left;} * .person-photo img { margin:0 auto; width: 150px; height: 150px; } * .person-name { margin-top:1em; margin-bottom: 0px; font-size: 14px; } .person- name h5 { margin: 0px; padding: 0px; } * .person-titre { margin:0px; padding-top:0px; } .person-titre h5 { margin-bottom: 0px; margin-top: 0px; padding-bottom: 0px; } * [@media](https://wordpress.org/support/users/media/) only screen and (min-device- width : 320px) and (max-device-width : 480px) { * #one-person { width:100%; text-align:center; margin:0 0 30px 0; float: none;} * .person-photo img { margin:auto auto; width: 350px; height: 350px; } * .person-name { margin-top:1em; } * .person-titre { margin:0px; padding-top:0px; } .person-titre h4 { margin-bottom: 0px; padding-bottom: 0px; } * [dmkjr](https://wordpress.org/support/users/dmkjr/) * (@dmkjr) * [10 years, 7 months ago](https://wordpress.org/support/topic/multiple-column-custom-view/#post-6435659) * Also, to be fair…. I have this set at 25%, so it’s actually going to make 4 rows for the most part. You can change that to 50% or remove float. * [helensama](https://wordpress.org/support/users/helensama/) * (@helensama) * [10 years, 5 months ago](https://wordpress.org/support/topic/multiple-column-custom-view/#post-6435787) * Hi,am trying to do exactly this, so was happy to find this, but I am missing something and hope that you, dmkjr, will see my question. * I set up a page with the code on it and then I put the css in the style sheet, but I am not pulling in any staff member data… and as I am writing this, just had a thought – do I have to make a template and how do I do that? * Thanks for any help[ in advance. * [ametcalf](https://wordpress.org/support/users/ametcalf/) * (@ametcalf) * [10 years, 2 months ago](https://wordpress.org/support/topic/multiple-column-custom-view/#post-6435802) * I love the code that you have put up, but am having an issue where there are four items in the first row, but only 1 in the second and it is floating right. And that is happening at other points in the grid too. Where a few items are missing or there are only 1-3 on the row and floated right. Any thoughts? * Here’s a link to the page. It is just a preview so I am not sure if you will be able to see or not. * Thanks! * [ametcalf](https://wordpress.org/support/users/ametcalf/) * (@ametcalf) * [10 years, 2 months ago](https://wordpress.org/support/topic/multiple-column-custom-view/#post-6435803) * [http://www.lcmsgathering.com/?page_id=1667&preview=true](http://www.lcmsgathering.com/?page_id=1667&preview=true) * [ametcalf](https://wordpress.org/support/users/ametcalf/) * (@ametcalf) * [10 years, 2 months ago](https://wordpress.org/support/topic/multiple-column-custom-view/#post-6435804) * I changed the height to a set number of pixels since the heights we varying based on the number of lines of text per item and that fixed the problem! Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Multiple Column Custom View’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/staff-directory_a19d9e.svg) * [Staff Directory](https://wordpress.org/plugins/staff-directory/) * [Frequently Asked Questions](https://wordpress.org/plugins/staff-directory/#faq) * [Support Threads](https://wordpress.org/support/plugin/staff-directory/) * [Active Topics](https://wordpress.org/support/plugin/staff-directory/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/staff-directory/unresolved/) * [Reviews](https://wordpress.org/support/plugin/staff-directory/reviews/) ## Tags * [custom-template](https://wordpress.org/support/topic-tag/custom-template/) * 7 replies * 4 participants * Last reply from: [ametcalf](https://wordpress.org/support/users/ametcalf/) * Last activity: [10 years, 2 months ago](https://wordpress.org/support/topic/multiple-column-custom-view/#post-6435804) * Status: not resolved