WEB: Fix maintainers grid not displaying correctly (GH41438)
State: closed

- [x] closes #41438 
- [x] Ensure all linting tests pass, see [here](https://pandas.pydata.org/pandas-docs/dev/development/contributing.html#code-standards) for how to run them

Screenshot taken on Google Chrome 90.0.4430.93

![screenshot](https://user-images.githubusercontent.com/18680207/118068760-ef740800-b370-11eb-902d-237da39e2b7f.png)

To reproduce, 
- go to https://pandas.pydata.org/about/team.html
- open developer tools
- go to elements tab
- navigate to <div class="row maintainers">
- edit as HTML
- delete <div class="row maintainers"> and the closing tag at the end


Labels:
name: Web
description: pandas website

Comments:
have you tried instead:

```
    <div class="card-group maintainers">
        {% for person in maintainers.people %}
                <div class="card">
                ...
                </div>
        {% endfor %}
    </div>
```

seems to cut out maybe a lot of unnecessary batch grouping?
Thanks! I tried it but I ended up with very small cards. See:
![card-group_only](https://user-images.githubusercontent.com/18680207/118143750-ad32e100-b3d9-11eb-8e82-2eb087322f43.png)

I can use CSS to set `min-width:10rem;`. See:
![min-width_option](https://user-images.githubusercontent.com/18680207/118149622-b32bc080-b3df-11eb-888d-8c602dbf58c2.png)

Would this be preferable?

Edit: What is the recommended way to edit PRs?
> Edit: What is the recommended way to edit PRs?

If I've understood the question correctly: by just adding a new commit (they'll all get merged at the end anyway)
> > Edit: What is the recommended way to edit PRs?
> 
> If I've understood the question correctly: by just adding a new commit (they'll all get merged at the end anyway)

Thanks. I was wondering if I should amend my local commit and force push but I don't know how it'll affect this PR (or if I should make a new PR). Or do something like squashing commits.
After further testing, setting min-width alone doesn't work either because if you set the screen size wide enough the last row (Patrick) ends up takes up the whole row . I'll tinker further to see if I can come up with a solution.
Thanks @calvh 

This should be what we want: https://bootstrapcreative.com/pattern/responsive-card-deck-example/

The CI should be now fix if you merge master into your branch.
I've come up with a solution that keeps the structure as:
```html
<div class="card-group maintainers">
  <div class="card">
  <div class="card">
  ...
```
by adding the following CSS:
```css
@media (min-width: 576px) {
    div.card {
        min-width: 10rem;
        max-width: 10rem;
    }
}
```

See: 
![demo](https://user-images.githubusercontent.com/18680207/118167186-6b636400-b3f4-11eb-82ad-979f56977c95.gif)

If I want to avoid changing the CSS and use classes like in the example given by @datapythonista I could use something like:
```html
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
  <div class="col mb-1">
  <div class="card"
  ...
```
but that requires a higher version of bootstrap (e.g., 4.6). Current version is 4.0. 

Should I update bootstrap and follow the example?
If you want to upgrade bootstrap, that surely sounds good. But let's have a separate PR for the upgrade, and another one for this fix. Up to you.
I think upgrading Bootstrap is a good idea. They just dropped a stable version (5.0) and it will open up new features for future developers to improve the website. In addition, v5 no longer uses jQuery so one less dependency is better in my opinion. I will do some testing on my local machine. 

Edit: should I be creating a new issue?
Yes, a new issue can help give it more visibility, in case anyone else has opinions.
@datapythonista Please remove approval for now there is a conflict with the community/blog page because it also uses the div.card style. I'll try to fix this asap

Edit: sorry the inconvenience. I should have checked all pages.
@datapythonista pls merge when ready
Just pushed. I fixed it by adding additional selectors to the new rule so it only applies to the team page and not the blog page.

Edit: sorry again @datapythonista I hope its not too much trouble.
Thanks for the fix @calvh. If you want to have a look at the production website in couple of hours (after it's updated), and see if everything looks as expected, that would be great.
Your welcome I am happy to do so later. Thanks for the support!
Looks like the grid if now displayed correctly, and Patrick's card is shown as the others. The rest of the website looks as before. Thanks for the fix @calvh