New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cards are not equal height #578
Comments
Actually, it looks like |
I think adding https://getbootstrap.com/docs/5.2/components/card/#grid-cards |
In the first example of equal height cards in the Bootstrap docs (same link as above), the cards do not have footers (see screenshot). In the second example they do. So, I'm not sure if the footer is actually required to make the cards equal height. It does not seem that CRX is using the ("Latest Pages" is another place this issue shows up.) |
In card grid decks and related page decks, the cards are not equal height (unless the line breaks happen to line up). See the attached example showing the bottom borders of a row of related pages.
Applying
.h-100
to each card, or$card-height: 100%
in Sass (as per Bootstrap docs) will render the cards in equal height. The card grid decks allow for this via addingh-100
to the custom CSS field, but the related page cards do not offer that option.I think most users would want the related page cards to be of equal height as well as the cards of regular card decks. This could be achieved globally by adding
$card-height: 100%;
to the SCSS (this is what I will do for now, in my own project). I would volunteer to create a pull request for this, but I'm not sure you want a global solution for all cards (as I do), and I'm not sure where you'd want the code to be (in custom.scss?).Another option would be to specify
.h-100
in the template just for related pages, or to add the custom CSS option to related pages.The text was updated successfully, but these errors were encountered: