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!
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!
