Multiple Column Custom View

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

Hello Jay,
You can use this code to get what you want, or close enough and then adjust.

<div id=”one-person”>
<div class=”person-photo”>
<img src=”[photo_url]” />
</div>
<div class=”person-name”><h5>[name]</h5></div>
<div class=”person-titre”><h5>[position]</h5></div>
<div class=”person-number”>Phone: [phone_number]</div>
<div class=”person-email”>Email: [email]</div>
</div>

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 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;
}

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.

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.

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!

https://www.lcmsgathering.com/?page_id=1667&preview=true

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!