Question 278022 in CSS Question posted in
Some basic documentation can be found here.

Css – Why when use align-items, it changes the size of one of the flex items?

I used flex box for the responsive design. I did not change size of each flex-items. However, when I applied align-items:center, it changes the size of first flex item(PICTURE 2) when it is display in vertical view. However, PICTURE 1 is perfectly fine What is the issue that lead to this? (adding in height:100% to media query does not fix the issue; adding in flex: 1 and max-width:400px to each flex items does not fix the issue either)

PICTURE 1
PICTURE 1

PICTURE 2
PICTURE 2

body {
  font-family: 'Sono', sans-serif;
}

.pricing-plan {
  background-color: #F2F2F2;
  padding: 20px;
  text-align: center;
}
.plan-button {
  background-color: #FF6600;
  color: white;
  border: none;
  font-size: 13.3333px;
  padding: 10px;
}
.plan-title {
  font-size: 24px;
  font-weight: bold;
}
.plan-price {
  font-size: 48px;
  font-weight: bold;
}
.plan-features {
  list-style-type: none;
}
.pricing-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

/* Hint: What can you do with a media query and flexbox? */
@media (max-width: 1250px) {
  .pricing-container{
    flex-direction: column;   
  }
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sono:wght@400;700&display=swap" rel="stylesheet">

<div class="pricing-container">
  <div class="pricing-plan">
    <div class="plan-title">Basic</div>
    <div class="plan-price">$9.99/month</div>
    <ul class="plan-features">
      <li>✅ 10GB Storage</li>
      <li>✅ 1 User</li>
      <li>🚫 Support</li>
    </ul>
    <button class="plan-button">Sign Up</a>
  </div>
  <div class="pricing-plan">
    <div class="plan-title">Standard</div>
    <div class="plan-price">$19.99/month</div>
    <ul class="plan-features">
      <li>✅ 50GB Storage</li>
      <li>✅ 5 Users</li>
      <li>✅ Phone &amp; Email Support</li>
    </ul>
    <button class="plan-button">Sign Up</a>
  </div>
  <div class="pricing-plan">
    <div class="plan-title">Premium</div>
    <div class="plan-price">$49.99/month</div>
    <ul class="plan-features">
      <li>✅ 100GB Storage</li>
      <li>✅ 10 Users</li>
      <li>✅ 24/7 Support</li>
    </ul>
    <button class="plan-button">Sign Up</a>
  </div>
</div>
Tags:

2

Answers


  1. 0

    The leading reasons is the length of the price ( length of text) in the box. We could set min-width for each items to fix it. Min-width should be longer than the text length.

    Login or Signup to reply.
  2. 0

    The width of the boxes does not change. However, it is not noticeable that the first box is narrower when positioned horizontally. You could add a non-breaking space &nbsp; before or after the price to match the character length, or you could add a few CSS declarations:

    .pricing-container {
  width: min-content;
  margin: auto;
}

@media (max-width: 1250px) {
  .pricing-container {
    align-items: normal;   
  }
}

    Additionally, I recommend that you replace height with min-height so that the content isn’t clipped when the viewport height is less than the height of the three boxes.

    .pricing-container {
  /* height: 100vh; */
  min-height: 100vh;
}

    body {
  font-family: 'Sono', sans-serif;
}

.pricing-plan {
  background-color: #F2F2F2;
  padding: 20px;
  text-align: center;
}
.plan-button {
  background-color: #FF6600;
  color: white;
  border: none;
  font-size: 13.3333px;
  padding: 10px;
}
.plan-title {
  font-size: 24px;
  font-weight: bold;
}
.plan-price {
  font-size: 48px;
  font-weight: bold;
}
.plan-features {
  list-style-type: none;
}
.pricing-container {
  display: flex;
  min-height: 100vh;
  width: min-content;
  margin: auto;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

/* Hint: What can you do with a media query and flexbox? */
@media (max-width: 1250px) {
  .pricing-container {
    flex-direction: column;
    align-items: normal;
  }
}
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sono:wght@400;700&display=swap" rel="stylesheet">

<div class="pricing-container">
  <div class="pricing-plan">
    <div class="plan-title">Basic</div>
    <div class="plan-price">$9.99/month</div>
    <ul class="plan-features">
      <li>✅ 10GB Storage</li>
      <li>✅ 1 User</li>
      <li>🚫 Support</li>
    </ul>
    <button class="plan-button">Sign Up</a>
  </div>
  <div class="pricing-plan">
    <div class="plan-title">Standard</div>
    <div class="plan-price">$19.99/month</div>
    <ul class="plan-features">
      <li>✅ 50GB Storage</li>
      <li>✅ 5 Users</li>
      <li>✅ Phone &amp; Email Support</li>
    </ul>
    <button class="plan-button">Sign Up</a>
  </div>
  <div class="pricing-plan">
    <div class="plan-title">Premium</div>
    <div class="plan-price">$49.99/month</div>
    <ul class="plan-features">
      <li>✅ 100GB Storage</li>
      <li>✅ 10 Users</li>
      <li>✅ 24/7 Support</li>
    </ul>
    <button class="plan-button">Sign Up</a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search