Member Directory CSS for 3 Columns
-
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.
-
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!
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;
}
- The topic ‘Member Directory CSS for 3 Columns’ is closed to new replies.
