BuddyDev

Search

Redesign of xprofile fields in members directory

  • Participant
    Level: Yogi
    Posts: 1112
    calu on January 1, 2019 at 8:07 pm #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: 1112
    calu on January 1, 2019 at 10:18 pm #19841
    This reply has been marked as private.
  • Keymaster
    (BuddyDev Team)
    Posts: 24593
    Brajesh Singh on January 1, 2019 at 10:21 pm #19842

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

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1112
    calu on January 1, 2019 at 10:39 pm #19844
    This reply has been marked as private.
  • Keymaster
    (BuddyDev Team)
    Posts: 24593
    Brajesh Singh on January 1, 2019 at 10:51 pm #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: 24593
    Brajesh Singh on January 1, 2019 at 10:55 pm #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: 1112
    calu on January 1, 2019 at 11:20 pm #19848
    This reply has been marked as private.
  • Participant
    Level: Yogi
    Posts: 1112
    calu on January 1, 2019 at 11:25 pm #19849

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

    *of course with a much smaller font

  • Keymaster
    (BuddyDev Team)
    Posts: 24593
    Brajesh Singh on January 1, 2019 at 11:28 pm #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: 1112
    calu on January 2, 2019 at 12:23 am #19853
    This reply has been marked as private.

You must be logged in to reply to this topic.

This topic is: not resolved