Horizontal list produces 'orphan' between lines

  • I really like this plugin but it has one issue I am trying to resolve. I have the ‘staff’ displayed horizontally in a responsive (bootstrap based) theme. The first six ‘staff’ display in a row, then there is one ‘staff’ orphaned on the next row (floating right) and the final three show up on the next line. I can’t find out why this is happening. In tablet screen sizes it displays 3 across and for phones 2 across. In these smaller instances this one ‘staff’ is always an ‘orphan’ – alone on the row (floating right).
    Any ideas?
    Here’s a link to the page:
    https://credit-reserve.com/wordpress/contact-2/

    thanks for your consideration
    Doug

    https://www.ads-software.com/plugins/simple-staff-list/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Brett Shumaker

    (@brettshumaker)

    Hey Doug –
    You caught me online. ??

    Can you post the code you have in the staff template? It looks like one of your ‘div’ elements isn’t closed properly. If you post it here, I can help you get it sorted.

    Thread Starter dougwatson

    (@dougwatson)

    Hi Brett:

    Thanks for your reply, I really appreciate your help with this!
    Here’s the code . . .
    ____________________________________________________
    Template:
    [staff_loop]
    <div class=”col-xs-6 col-md-4 col-lg-3″>
    <img class=”staff-member-photo” src=”[staff-photo-url]” alt=”[staff-name] : [staff-position]”>
    <div class=”staff-member-info-wrap”>
    [staff-name-formatted]
    [staff-position-formatted]
    </div>
    [/staff_loop]

    ____________________________________________________
    CSS:
    /* div wrapped around entire staff list */
    div.staff-member-listing {
    }
    /* div wrapped around each staff member */
    div.staff-member {
    padding-bottom: 4em;
    }
    /* “Even” staff member */
    div.staff-member.even {
    }
    /* “Odd” staff member */
    div.staff-member.odd {
    }
    /* Last staff member */
    div.staff-member.last {
    }
    /* Wrap around staff info */
    .staff-member-info-wrap {
    float: left;
    width: 80%;
    margin-left: 3%;
    }
    /* [staff-bio-formatted] */
    div.staff-member-bio {
    }
    /* p tags within [staff-bio-formatted] */
    div.staff-member-bio p {
    }
    /* [staff-photo] */
    img.staff-member-photo {
    float: left;
    }
    /* [staff-email-link] */
    .staff-member-email {
    }
    /* [staff-name-formatted] */
    div.staff-member-listing h3.staff-member-name {
    margin: 0;
    }
    /* [staff-position-formatted] */
    div.staff-member-listing h4.staff-member-position {
    margin: 0;
    font-style: italic;
    }
    /* Clearfix for div.staff-member */
    div.staff-member:after {
    content: “”;
    display: block;
    clear: both;
    }
    /* Clearfix for <= IE7 */
    * html div.staff-member { height: 1%; }
    div.staff-member { display: block; }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Horizontal list produces 'orphan' between lines’ is closed to new replies.