Design a Pricing Plans Layout Page - Design a Pricing Plans Layout Page

Curriculum Help
,
1

Tell us what’s happening:

When I add justify-content: space-between to the .pricing-class, the content inside my divs gets unaligned horizontally but when I remove the property, it aligns again. What to do to fix this issue?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pricing Plans Layout Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Pricing Plans</h1>
    <div class="pricing-container">
      <div class="pricing-card basic-plan">
        <h2>Basic</h2>
        <p class="price">$9/month</p>
        <p class="push-down">Shortterm trial for beginners</p>
        <p class="important">Valid for 12 months</p>
        <button><a href="#">Subscribe</a></button>
        <ul>
          <li>Access to all classes Mon - Fri</li>
          <li>Free t-shirt</li>
          <li>1 -on- 1 consultation</li>
        </ul>
      </div>
      <div class="pricing-card pro-plan">
        <h2>Pro</h2>
        <p class="price">$19/month</p>
        <p class="push-down">Ideal for advanced trainers</p>
        <p class="important">Valid for 12 months</p>
        <button><a href="#">Subscribe</a></button>
        <ul>
          <li>Personalized program</li>
          <li>Four online form coaching sessions</li>
          <li>Access to massage therapist</li>
          <li>Full nutrition plan</li>
        </ul>
      </div>
      <div class="pricing-card premium-plan">
        <h2>Premium</h2>
        <p class="price">$29/month</p>
        <p>Perfect for committed trainers</p>
        <p class="important">Valid for 12 months</p>
        <button><a href="#">Subscribe</a></button>
        <ul>
          <li>24/7 Gym access</li>
          <li>Custom strength & conditioning program</li>
          <li>Weekly mobility training sessions</li>
          <li>Four physio sessions per month</li>
        </ul>
      </div>
    </div>
  </body>
</html>

/* file: styles.css */
h1{
  text-align: center;

}
.pricing-container{
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  margin: 50px auto;
  height: 600px;
  
  padding: 10px;
}
.pricing-card{
  max-height: 455px;
  display: flex;
  flex-direction: column;
  align-content: space-evenly;
  justify-content: space-between;
  order: 0;
  flex: 0 0 200px;
  border: 2px solid black;
  padding: 12px;
  margin: 5px;
  background: linear-gradient(0deg, lightgray 48%, white 10%);
  box-shadow: 5px 8px 5px lightgray;
}
.basic-plan{
  order: 0;
  
}
.pro-plan{
  order: 1;
  flex-grow: 2;

}
.premium-plan{
  order: 2;
  
}
h2, p{
  text-align: center;
  font-weight: bold;
}

.price{
  padding-bottom: 3px;
  border-bottom: 2px solid orange;
}
button{
  border: 2px solid black;
  margin-top: 5px;
  border-radius: 10px;
  background-color: tan;
  padding: 5px;
  
}
.push-down{
  margin-bottom: 35px;
}
.important{
  font-style: italic;
}
button:hover{
  background-color: orange;
  
  cursor: pointer;
}
a{
  text-decoration: none;
  color: white;
}
a:hover{
  color: black;
}
li{
  list-style: none;
  padding: 3px;
}
li::before {
    content: "✓";
    margin-right: 4px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15

Challenge Information:

Design a Pricing Plans Layout Page - Design a Pricing Plans Layout Page

GitHub Link: https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/blocks/lab-pricing-plans-layout/68e45a2b4ab9b2f48b1cc6df.md

2

can you show what you mean? I am not sure I understand

3

Of course.

IMG_1060
IMG_10601920×1440 573 KB
With justify-content: space-between;

4

IMG_1061
IMG_10611920×1440 634 KB

WITHOUT justify-content: space-between

5

the checklist on the third one is longer, so once you use space-between, that one takes more vertical space and means the space between the elements is smaller because the total height of the elements is a bit more

6

So, the only way for them to align properly while using justify-content, I would have to make the text shorter in the third box?

7

you would need to make sure that all three checklists have the same height, you can do that in multiple ways, like with an height property

8

I added the height to the pricing-card class and I get the same results.

9

image
image1079×713 113 KB

I was able to achieve the above result. I believe it would be a better approach if you divide your card within 2 sections, card header and card body.

justify-content: space-between on multiple loose items can be a problem. The gaps b/w items depend on how much content card has. A card with 3 lists items vs 4 lists item will have different spacing everything so nothing stays consistent.

Once you divide the above, then you can set them to be flex container and set the direction and achieve the above result.

The above can be one approach to the problem.