New
PeoplePress is here. Community building for WordPress, reimagined. Fast, modern, and built for the communities you've always wanted to run.
See it live

BuddyDev

Search

Display more member cards in a single row in member directory loop

Tagged: , ,

  • Participant
    Level: Initiated
    Posts: 5
    Fabian on November 2, 2023 at 8:08 am #50815

    Hi,

    I know this question is unrelated to any of your plugins, I only ask because one of my friends in the same BuddyBoss community on Facebook recommended you and told me to try because you have several years of BuddyPress/BuddyBoss experience.
    Maybe I am lucky and the question has already been answered but I just did not come across it yet.

    Anyway, here is my what I am trying to do:

    I would like to display more member cards in each row in the member directory.

    The member cards take up way too much space, I could easily fit more in one row.
    However it seems as there are other templates or stylesheets that make this task almost impossible.
    To be more precise: As you probably know the member cards consist of several layers and not just a simple box container.
    Even though, I can play around with margins and padding in developer tools and see the changes.
    I even found this item which would fit way more member cards into a single row:

    #buddypress .members-list > li {
  min-width: 275px;
}

    If I use max-width instead it would work, however, once I save it (even with !important) the directory automatically reverts back to its orignal state. Meaning, my change(s) just wont be applied, no matter what.
    I just cannot find any rule or stylesheet that takes precedence for this line of code to play with that one.

    Any help or suggestion is very welcome 😉

  • Keymaster
    (BuddyDev Team)
    Posts: 25509
    Brajesh Singh on November 6, 2023 at 12:27 pm #50834

    Hi Fabian,
    Thank you for the question.
    If you are using BuddyBoss, you can use the following css.

    
#buddypress .grid.bp-list>li.item-entry {
 flex: 0 0 25%;	
  min-width:unset;
}

    That will show 4 cards per row. To show 5, change 25% to 20% and so on.

    It will affect all list. If you want to apply only to members list, you can use the following instead.

    
#buddypress #members-dir-list  .grid.bp-list>li.item-entry {
 flex: 0 0 25%;	
 min-width:unset;
}

    Hope that helps.

    Regards
    Brajesh

You must be logged in to reply to this topic.

This topic is: not resolved