Question posted in 
I’m currently facing some issues with my website, which is built on Shopify and includes a customized section. I’m not entirely sure what I’ve done wrong in my code, but there are three main problems:
- The Klarna and PayPal logos are not aligned with each other, and the space between the two logos and the headline is quite large.
- I want to align the height of the cards to match the tallest card in the row. However, as you can see in the picture, there’s still a slight difference in height between the two cards. This issue shouldn’t be caused by the content, as even after copying and pasting the same content into the two different divs, the problem persists.
- The cards have margins around them to create space between them. However, this also results in margins on the outer sides, causing the boxes to not align with the other sections.
I would greatly appreciate your support.
Best regards,
Allen
<!-- Second Row Section -->
<style>
.second-row-cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0px 0;
align-items: stretch;
}
.second-row-cards .card {
text-align: left;
padding: 0px 10px 10px 10px;
width: 48%;
margin: 1%;
background-color: #F6F6F6;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.second-row-cards .card-header {
flex-direction: column;
align-items: flex-start;
margin-bottom: 5px;
}
.second-row-cards .icons-row {
display: flex;
align-items: center; /* Zentriert die Icons vertikal auf einer Linie */
width:100%;
margin-bottom: 7px;
}
.second-row-cards img {
width: 20px;
height: 20px;
margin-right: 5px;
}
.second-row-cards .caption-2 {
font-weight: 450;
font-size: 12px;
color: #333;
margin-bottom: 5px;
}
.second-row-cards .body-4 {
font-size: 12px;
color: #444;
line-height: 1.6;
}
</style>
<div class="second-row-cards">
<div class="card">
<div class="card-header">
<div class="icons-row">
<img src="https://cdn.shopify.com/s/files/1/0674/1740/7804/files/Icon_PLEON_Klarna_813785f1-282e-4f5e-840b-745585bc4815.svg?v=1723572724" alt="Bezahlung über Klarna">
<img src="https://cdn.shopify.com/s/files/1/0674/1740/7804/files/Icon_PLEON_PayPal.svg?v=1723551376" alt="Bezahlung über PayPal">
</div>
<p class="caption-2">Bequem auf Rechnung</p>
</div>
<p class="body-4">Bezahle bequem auf Rechnung mit PayPal oder Klarna</p>
</div>
<div class="card">
<div class="card-header">
<div class="icons-row">
<img src="https://cdn.shopify.com/s/files/1/0674/1740/7804/files/Icon_PLEON_Calendar_filled.svg?v=1723570827" alt="Rückgaberecht">
</div>
<p class="caption-2">30 Tage Rückgaberecht</p>
</div>
<p class="body-4">Risikofrei dank Zufriedenheitsgarantie</p>
</div>
</div>
2
Answers
In the code you posted, the two logos are aligned, and the boxes are the same height, so there must be something else at play. For the margin issue, you can remove the margins and use the
gapproperty instead. I’ve also removed the 48% width and instead set the boxes toflex-grow: 1to make them fill the available width (as otherwise they’ll just wrap around their content). BUT … the boxes won’t be equal width, because flex isn’t really good at that, so you’d be better off using Grid for placing two equal-width boxes side by side.Here’s a flex version (which doesn’t give exactly what you want):
Here’s a Grid version, which is better imho:
Works fine with
display:flex;.Just add
height: inherit;to the.carddiv which helps to resolve the height issue for both the card box. Now they both are equal height no matter how long the content in the box.Remove extra CSS which is not affecting.