More then 3 members per row in grid view

Hi @bodhi1970

You can use this css to change the grid ti 4 column:

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
    width: 22% !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-gutter-sizer {
    width: 3% !important;
}

Thanks

Thank you
I tried that many times and it makes the 3 columns less wide but there are still 3 columns with a very wide gap between.
I also have in my code a class .masonry-brick in the code and do not know where that comes from. I use Hallo Elementor Theme which does not have any styling features like this.

<div class="um-members um-members-grid masonry" style="position: relative; height: 2050px;">
		<div class="um-gutter-sizer masonry-brick"></div>
<div id="um-member-ce234-503d8" class="um-member um-role-subscriber approved with-cover masonry-brick" style="position: absolute; left: 0px; top: 0px;">
<span class="um-member-status approved">

Yes, suddenly it works!!!
I had to clear the Cache and now it looks great.
I even have made 5 columns with width 18%/2%

THANK YOU VERY MUCH @towhid!

@bodhi1970
Yes,the css rules work, but then the layout is no more responsive and it is stretched. Ideas on how it could work also on mobile?
It would be so useful to choose how many columns are needed from plugin settings?
Thank you

• This reply was modified 4 years, 11 months ago by kkriss.

@kkriss you need to put different settings for each display width with @media queries.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thank you bodhi1970, I knew it but I’m not able to. I tried but no luck. It’s a pity as I can imagine it’s not too difficult but it is for me. The actual layout with 3 big users box is very odd and so is the list of how users posts are displayed in users profile. ??

• This reply was modified 4 years, 11 months ago by kkriss.

Hi @kkriss
I am using this code maybe it serves you too:

/* = UM-Members Directory Grid = */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
   width: 18% !important;
}
.um-directory .um-members-wrapper .um-members.um-members-grid .um-gutter-sizer {
   width: 2% !important;
}

/* = Media Queries = */
/* LG Big screens */
/* MD Tablet, ipad landscape */
@media only screen and (min-width : 768px) and (max-width: 1024px) and (orientation: landscape) {
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
   width: 18% !important;
}
.um-directory .um-members-wrapper .um-members.um-members-grid .um-gutter-sizer {
 ? width: 2% !important;
}
}
/* SM Tablet, ipad portrait */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
   width: 30% !important;
}
.um-directory .um-members-wrapper .um-members.um-members-grid .um-gutter-sizer {
 ? width: 5% !important;
}
}
/* XS Mobile portrait */
@media only screen and (max-width: 767px) {
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
   width: 47% !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-gutter-sizer {
   width: 5% !important;
}
}
/* XSL Mobile landscape */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
   width: 30% !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-gutter-sizer {
   width: 5% !important;
}
}

Hey bodhi1970 you’re my hero! That worked. I changed many things as per my needs and my members page looks gorgeous now, the only thing I can’t change is to center align the whole members grid in the page because it is actually left aligned but can’t find the right element to center. Thanks

Yes, I couldn’t find that out neither. I might change to ARMembers anyways soon, so I don’t want to put too much work into it now.

Seems ARMembers is more oriented for sites that want to monetize subscriptions plans, so that is integrated with payments, coupons and so on. My subscriptions will be all free, so I think UM is enough for me even if it’s difficult to style it and also translations are not easy at all to manage. Thanks for your help.