Layout issue with members with smaller github profile photos

[danieltott]

Describe the bug

If a user has a smaller profile photo on github (I'm not sure what makes this happen), and that member also doesn't have a bio, the member block ends up not taking up all of the space that it should once we reach the sm breakpoint. You can see this currently with Vanessa's photo.

To Reproduce

If Vanessa updates her github profile in the meantime, you won't be able to see this, but currently:

Steps to reproduce the behavior:

1. Go to https://virtualcoffee.io/members/
2. Scroll down to Vanessa's profile

Expected behavior

All of them should be laid out the same

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser FF, Chrome, etc
• Version [e.g. 22]

Additional context

We're setting a max-width right now, it's possible setting that to just width would settle it. Would be open to other solutions as well.

[danieltott]

I'd be happy to pair with anyone who'd like to take a crack at this one!

[kldickenson]

I would like to take this one on if it's still available.
-- Karen

[danieltott]

@kldickenson You got it! Let me know if I can help!

[kldickenson]

Dan,
It looks like this issue was solved when the founders were highlighted ( Issue #45 ).

--
Karen

[danieltott]

OK so the issue is still there, but it a little less noticeable now that everyone has filled out their profiles a little more.

To test this out locally - try (temporarily) pasting in this html at the end of the members list (after the {% endfor %}:

<div class="row membercard">
  <div class="col-3">
    <img
      class="shadow-sm rounded"
      src="https://placehold.it/300x300/cccccc/ffffff"
      alt="Test user  profile image"
    />
  </div>
  <div class="col-9">
    <div class="membercard-header">
      <h5>Test user</h5>
      <div class="membercard-social">
        <a
          class="membercard-icon"
          target="_blank"
          rel="noopener noreferrer"
          href="https://github.com/Virtual-Coffee"
          title="Virtual Coffee on GitHub"
          ><svg
            role="img"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <title>GitHub icon</title>
            <path
              d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
            ></path></svg></a>
      </div>
    </div>
    <p class="text-muted"></p>
  </div>
</div>

This will add a test user that simulates a user that has a smaller photo and minimal profile info:

[danieltott]

Thank you @kldickenson!!!