I wish to display the avatars in a 5 column format instead

Hi, I wish to display the avatars in a 5 column format instead of the default 3 column. How do I do that? Also, how do I remove the avatar's name and have no gap between the avatars' image? I wish to replicate this screenshot from WPDEV.

Thank you!

  • Sajid
    • DEV MAN’s Sidekick

    Hi @discorpio123,

    Hope you are doing good today :slight_smile:

    It can be done with the help of custom CSS. Please share the link of page where I can see experts so I could give you code to make it display 5 users in one row.

    Look forward towards your response Gerald :slight_smile:
    Cheers, Sajid

  • Sajid
    • DEV MAN’s Sidekick

    Hi Gerald,

    Hope you are doing good today :slight_smile:

    I am sorry, I can't say exactly when I will be looking at it, we reply back on tickets in the order we receive them.

    However you can grant support staff access so I would login and access this page when I will on this ticket next time. This will ensure that I will only see the page as an administrator bypassing the maintenance wall for visitors.

    To grant support staff access go to WPMU DEV > Support > Support Access > Grant Access or see this manual for more details.

    Take care and have a nice day :slight_smile:
    Cheers, Sajid

  • Sajid
    • DEV MAN’s Sidekick

    Hi @discorpio123,

    Hope you are doing good today :slight_smile:

    Try adding following code in functions.php file of your theme or use it as mu-plugin.

    add_filter('je_expert_css_classes', 'wpmu_dev_change_columns_of_experts');
    function wpmu_dev_change_columns_of_experts( $css_class ){
    	$css_class   = array(
    			'lg' => 'col-lg-15 col-md-15 col-xs-3 col-sm-12 no-padding no-margin',
    			'md' => 'col-md-15 col-xs-3 col-sm-12 no-padding no-margin',
    			'xs' => 'col-md-15 col-xs-12 col-sm-12 no-padding no-margin',
    			'sm' => 'col-md-15 col-xs-12 col-sm-4 no-padding no-margin'
    		);
    
    	return $css_class;
    }

    And add following code in style.css file of your child theme, in custom CSS section of theme options or use Simple Custom CSS plugin.

    .col-xs-15,
    .col-sm-15,
    .col-md-15,
    .col-lg-15 {
        position: relative;
        min-height: 1px;
        padding-right: 10px;
        padding-left: 10px;
    }
    .col-xs-15 {
        width: 20%;
        float: left;
    }
    @media (min-width: 768px) {
    .col-sm-15 {
            width: 20%;
            float: left;
        }
    }
    @media (min-width: 992px) {
        .col-md-15 {
            width: 20%;
            float: left;
        }
    }
    @media (min-width: 1200px) {
        .col-lg-15 {
            width: 20%;
            float: left;
        }
    }

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:
    Cheers, Sajid

  • Gerald
    • Flash Drive

    Hi Sajid,

    Awesome, thanks for the customised code. Unfortunately, i tried inserting it in but the site became broken and i had to reinstall everything.

    Will it be possible for you to help me insert the code directly into the pages? I can grant you the access you need for a few days to have it done, if you can help me. I will also back up the site first this time before you insert the code in for me.

    Thanks,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.