How to have two cards on the same row to have the same height? #2294
Answered
by
claviska
goosedeersolutions
asked this question in
Help
-
I have two cards on the same row. The first is card contains a square image with a width of 25%, and the second contains a table with a width of 75%. I am trying to get the two cards to be the same height. <div class="market-data-wrapper">
<wa-card class="image-card">
<img src="" class="set-image" onerror="">
</wa-card>
<wa-card class="info-card" with-header>
<div slot="header">
<div>Card Title</div>
</div>
<div class="" id="">
</div>
</wa-card>
</div> .market-data-wrapper {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.5rem;
.image-card {
width: calc(25% - 0.25rem);
img {
width: 100%;
border-radius: var(--wa-border-radius-s);
}
&::part(body) {
padding: 0.25rem;
}
}
.info-card {
width: calc(75% - 0.25rem);
img {
margin-bottom: 0.25rem;
}
&::part(body) {
padding: auto .5rem;
}
}
} For the life of me I cannot get the right card to be the height of the left card, especially when if comes to different zoom values. I cant get this to grow to the height of the row and if I do it doesn't take into the height of the header. |
Beta Was this translation helpful? Give feedback.
Answered by
claviska
Dec 2, 2024
Replies: 1 comment 1 reply
-
This CodePen example should help. |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
goosedeersolutions
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This CodePen example should help.
https://codepen.io/claviska/pen/rNPOjqw