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: 24593
    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