BuddyDev

Search

Redesign of xprofile fields in members directory

  • Participant
    Level: Yogi
    Posts: 1117
    calu on #19840

    Hi Brajesh

    I have added some of the xprofile fields to the members directory with a code snippet from your directory, and it works very well.

    But I really having difficulties getting the design right. I have tried to change the float of the different elements, to get a more compact design than this:

    https://imgur.com/a/nHAGYwP

    What I am looking for is my four xprofile fields next to the avatar like the text field here:

    https://imgur.com/a/OjgY7eY

    Is there an easy css fix to this?

    Regards
    Carsten

  • Participant
    Level: Yogi
    Posts: 1117
    calu on #19841
    This reply has been marked as private.
  • Keymaster
    (BuddyDev Team)
    Posts: 24712
    Brajesh Singh on #19842

    Please link me to your page, Should be a minor css as you have amlmost done it.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1117
    calu on #19844
    This reply has been marked as private.
  • Keymaster
    (BuddyDev Team)
    Posts: 24712
    Brajesh Singh on #19845

    Hi Carsten,
    Please add the following css and it should do it partially.

    
    .bph_xprofile_fields {
    
        margin-left:0
        position: absolute;
        left: 0;
        bottom: 0;
    }
    
    #members-dir-list .bp-list li .item-avatar {
      margin-bottom: 100px;
    }
    
    

    That should most probably do it.

    Please let me know if it works or not?

    Regards
    Brajesh

  • Keymaster
    (BuddyDev Team)
    Posts: 24712
    Brajesh Singh on #19847

    Also,
    If it looks bad, Please change margin rule in the above code from

    
    margin-left: 0;
    
    

    to

    
    margin-left: 0 !important;
    
    

    That should put the text under image.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1117
    calu on #19848
    This reply has been marked as private.
  • Participant
    Level: Yogi
    Posts: 1117
    calu on #19849

    ‘user name* and last activity are within the height of the avatar ‘

    *of course with a much smaller font

  • Keymaster
    (BuddyDev Team)
    Posts: 24712
    Brajesh Singh on #19850

    You will need to target using media query. Simply removing position:absolute and the bottom margin for avatar will solve it for the mobile.

    As of the last design shared(3 cols or 2 cols), That will need template modification, mere css won’t be able to fix it.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1117
    calu on #19853
    This reply has been marked as private.

You must be logged in to reply to this topic.

This topic is: not resolved