skip to Main Content

I’m looking for a fixed 40 pixel gap in between columns but the wider you make the screen the larger a gap flexbox creates. How do I set this fixed gap and stop this behavior?

(its complaining about it being a short description but there are no other details to add so I will just add this text here to hopefully stop this message from coming up)

.browser-box {
  max-width: 270px;
  margin: 0 auto 40px;
  box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 12px,
              rgba(149, 157, 165, 0.2) -2px 0 6px;
  /* box-shadow: rgba(149, 157, 165, 0.2) 0 8px 12px; */
  border-radius: 8px;
}

.browser-box h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
}

.browser-box p {
  margin-bottom: 35px;
  font-size: 15px;
}

.btn-browser {
  width: 75%;
  margin-bottom: 25px;
  margin-right: 0;
}

  .browsers-container {
    display: flex;
    justify-content: center;
    column-gap: 40px;
    margin-inline: auto;
  }
  .browser-box:nth-of-type(2) {
    transform: translateY(40px);
  }
  
  .browser-box:nth-of-type(3) {
    transform: translateY(80px);
  }
<div class="browsers-container">
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
</div>

2

Answers


  1. Adjust the auto in the .browser-box margin attribute. It is overriding the latter declarations.

    .browser-box {
          max-width: 270px;
          margin: 0;
          box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 12px,
                      rgba(149, 157, 165, 0.2) -2px 0 6px;
          /* box-shadow: rgba(149, 157, 165, 0.2) 0 8px 12px; */
          border-radius: 8px;
        }
    Login or Signup to reply.
  2. The padding is caused by the margin: 0 auto 40px; line in the css for .browser-box. This is setting the left and right margins to auto, causing this space-filling effect. Changing the left and right padding to 0 allows the column-gap to determine horizontal spacing.

    .browser-box {
      max-width: 270px;
      margin: 0 0 40px;
      box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 12px,
                  rgba(149, 157, 165, 0.2) -2px 0 6px;
      /* box-shadow: rgba(149, 157, 165, 0.2) 0 8px 12px; */
      border-radius: 8px;
    }
    
    .browser-box h3 {
      margin-bottom: 10px;
      font-size: 20px;
      font-weight: 500;
    }
    
    .browser-box p {
      margin-bottom: 35px;
      font-size: 15px;
    }
    
    .btn-browser {
      width: 75%;
      margin-bottom: 25px;
      margin-right: 0;
    }
    
      .browsers-container {
        display: flex;
        justify-content: center;
        column-gap: 40px;
        margin-inline: auto;
      }
      .browser-box:nth-of-type(2) {
        transform: translateY(40px);
      }
      
      .browser-box:nth-of-type(3) {
        transform: translateY(80px);
      }
    <div class="browsers-container">
      <div class="browser-box">
        <h3>Add to Chrome</h3>
        <p>Minimum version 62</p>
        <button class="btn-browser">Add & Install Extension</button>
      </div>
      <div class="browser-box">
        <h3>Add to Chrome</h3>
        <p>Minimum version 62</p>
        <button class="btn-browser">Add & Install Extension</button>
      </div>
      <div class="browser-box">
        <h3>Add to Chrome</h3>
        <p>Minimum version 62</p>
        <button class="btn-browser">Add & Install Extension</button>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search