Shopify Question posted in
The Shopify help center can be found here.

Shopify – I have issues with border alignments, content alignment and margins

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>

enter image description here

Tags:

2

Answers


  1. 0

    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 gap property instead. I’ve also removed the 48% width and instead set the boxes to flex-grow: 1 to 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):

    .second-row-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0px 0;
    align-items: stretch;
    gap: 1%;
  }
  .second-row-cards .card {
    text-align: left;
    padding: 0px 10px 10px 10px;
    background-color: #F6F6F6;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex-grow: 1;
  }
  .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;
  }
    <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>

    Here’s a Grid version, which is better imho:

    .second-row-cards {
display: grid;
flex-wrap: wrap;
grid-template-columns: 1fr 1fr;
gap: 1%;
  }
  .second-row-cards .card {
    text-align: left;
    padding: 0px 10px 10px 10px;
    background-color: #F6F6F6;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex-grow: 1;
  }
  .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;
  }
    <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>
    Login or Signup to reply.
  2. 0

    Works fine with display:flex;.
    Just add height: inherit; to the .card div 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.

    .second-row-cards {
    display: flex;
    justify-content: space-between;
    gap: 1%;
}
.second-row-cards .card {
    padding: 10px;
    background-color: #F6F6F6;
    flex-direction: column;
    height: inherit;
    width: 50%;
}
.second-row-cards .card-header{
/* NO CSS */
}
.second-row-cards .icons-row {
    display: flex;
    align-items: center;
    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;
}
    <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 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 Risikofrei dank Zufriedenheitsgarantie Risikofrei dank Zufriedenheitsgarantie Risikofrei dank Zufriedenheitsgarantie Risikofrei dank Zufriedenheitsgarantie Risikofrei dank Zufriedenheitsgarantie Risikofrei dank Zufriedenheitsgarantie Risikofrei dank Zufriedenheitsgarantie </p>
  </div>
  
</div>

    Remove extra CSS which is not affecting.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search