I have a row containing Propeller cards inside columns that are 4 wide at medium and large. So more than 3 cards correctly wrap to the next line.
Example code is:
`
<div class="pmd-card pmd-card-default pmd-z-depth">
<div class="pmd-card-media">
<img src="mydirectory/placehold318x180.png" width="1184" height="666" class="img-fluid">
</div>
<div class="pmd-card-title">
<span class="pmd-card-subtitle-text">Title text</span>
<h3 class="pmd-card-title-text">Subtitle text</h3>
</div>
<div class="pmd-card-body">
Card body text. Card body text. Card body text. Card body text. Card body text. Card body text. Card body text. Card body text.</div>
</div>
</div>`
1.
Card height consistency:
The problem is, when card contents vary in length (height), card heights become misaligned - some cards are shorter than others.
All cards should be a consistent height, the same as the tallest card in the set.
How can I accomplish this? Is it something that can only be done using a card deck, or is there something about flexbox?
2.
Card image size control:
Similarly, how can I ensure some regularity in the sizing of the images used in pmd-card-media? In the image area, I may choose to use images that have inconsistent dimensions. However, pmd-card-media should regulate this so that the images are rescaled. All pmd-card-medias should be a consistent height. The image itself perhaps should be rescaled, but not necessary resized.
Only way I can think of to achieve this is to use a div with an image background, with background-size set to "cover", instead of an actual image.
I have a row containing Propeller cards inside columns that are 4 wide at medium and large. So more than 3 cards correctly wrap to the next line.
Example code is:
`
1. Card height consistency:
The problem is, when card contents vary in length (height), card heights become misaligned - some cards are shorter than others. All cards should be a consistent height, the same as the tallest card in the set.
How can I accomplish this? Is it something that can only be done using a card deck, or is there something about flexbox?
2. Card image size control:
Similarly, how can I ensure some regularity in the sizing of the images used in pmd-card-media? In the image area, I may choose to use images that have inconsistent dimensions. However, pmd-card-media should regulate this so that the images are rescaled. All pmd-card-medias should be a consistent height. The image itself perhaps should be rescaled, but not necessary resized.
Only way I can think of to achieve this is to use a div with an image background, with background-size set to "cover", instead of an actual image.
Thanks
For card height normalisation - I added "
http://stackoverflow.com/a/43199428/1375163" to the pmd-card div and that seems to do the trick.FYI, my Bootstrap is 4.0.0 alpha 6.
Hi, Sounds great. If you need any further assistance please let us know. We will be happy to help you.