[abray]

I would like to showcase the members possible in 3 columns instead of one. Has anyone tried this? Can someone help me with CSS for 3 column Member Directory? Thanks in advance.

[pcwriter]

@abray

You can create a grid effect for lists by applying a display property to each list item and adjusting width and margins to suit the available space. For a 3-column members directory, try this:

ul#members-list li {
display:inline-block;
width:30%;
margin:6px;
}

After that, it’s a matter of playing with the CSS for the various elements contained within each list item to get it to look just right. Have fun!

[abray]

thank, gonna try it now and i’ll let you know.

[abray]

it worked… yes, I do need to tweek it! You are a genius! thank you!

[pcwriter]

You’re welcome!
Genius… no. Experimenter… yes.

[abray]

After almost a year, I am finally getting an actual social network built. But when using the code provided to make a three column member page – it’s also changing the CSS to the Member & Group widgets which I do not want. Their layout is just fine.

How can I apply this CSS so that it is only on say the Member or the Group page only and doesn’t effect the Member or Group Widget? Thank you in advance for you help.

MEMBER CODE

ul#members-list li {
display:inline-block;
width:30%;
margin:6px;
}

GROUP CODE

ul#groups-list li {
display:inline-block;
width:30%;
margin:6px;
}

[Prince Abiola Ogundipe]

@abray, you have to include div#content in the css, that way, it will not affect widget

Regards

[abray]

Thank you. I am a novice at this @naijaping. Would you happen to know how I would do this or is it theme specific or do I change it in the Buddypress system itself?

[struth]

Hi abray,

including div#content in the css class did not work in my theme however…
Try the below code, it works for me without upsetting widgets

#members-dir-list.members.dir-list li {
    display:inline-block;
    width:28%;
    margin:6px;
}

– JH