Padding / Alignment

Question

I am looking to have each "Column" to be flush with the above item. removing the massive white space between items rows. Does anyone know what I can do to accomplish this? The page is also designed to display a single row if the screen is displayed on a mobile device or the window is small on a computer.

current example

what we want to happen

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<script src="https://kit.fontawesome.com/xxxxxxxx.js" crossorigin="anonymous"></script>-->
<style>
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.row {
  max-width: 1000px;
}

.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 0 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}
</style>
</head>
<body>
<h2>Partners</h2>
<center>
<br>

<div class="row">
  <div class="column">
    <div class="card">
      <img src="https://cdn.discordapp.com/attachments/717875431650361374/756998695609958520/3f47713.png" alt="Cisco8" style="width:100%">
      <div class="container">
        <h2>Cisco6</h2>
        <p class="title">Youtuber</p>
        <p>this channel is aimed at people that like linux and like ricing it
          i will post videos on linux rices (usually arch or some variant of it),
          also ill be doing hacking(security), game programming, programming tutorials on topics,
          electronics and microcontrollers - robotics</p>
        <p><button class="button" onclick="window.location.href='https://www.youtube.com/channel/UCfhyTQpimu5Bp8Z4Q1rho1A';"><i class="fab fa-youtube"></i> Youtube</button>
           <button class="button" onclick="window.location.href='/';"><i class="far fa-id-badge"></i> Geek Profile</button>
           <button class="button" onclick="window.location.href='https://discord.gg/CMC5ta';"><i class="fab fa-discord"></i> Join</button>
        </p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="https://cdn.discordapp.com/avatars/577984014527234078/7ba76229b582f305a92021cba6fabf03.png?size=1024" alt="NaCl10" style="width:100%">
      <div class="container">
        <h2>NaCl10#6288</h2>
        <p class="title">Youtuber</p>
        <p>awaiting discription.</p>
        <p><button class="button" onclick="window.location.href='/u3';"><i class="far fa-id-badge"></i> Geek Profile</button>
           <button class="button" onclick="window.location.href='https://nacl10.com';"><i class="fab fa-youtube"></i> Youtube</button>
           <button class="button" onclick="window.location.href='https://github.com/NaCl10';"><i class="fab fa-github"></i> GitHub</button>
        </p>
      </div>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <img src="https://cdn.discordapp.com/attachments/736053153396424734/738152863003312158/C-01.jpg" alt="C/C++" style="width:100%">
      <div class="container">
        <h2>C/C++</h2>
        <p class="title">Discord Community</p>
        <p>Hey there! If you like a server about C,C++, and general programming that you might consider to join the C/C++ programming server. Here we have open discussions about programming topics. We also help anybody who needs help in the programming world. If you would like to join here is the invite</p>
        <p><button class="button" onclick="window.location.href='/';"><i class="far fa-id-badge"></i> Geek Profile</button>
           <button class="button" onclick="window.location.href='https://discord.gg/qeNWSPt'"><i class="fab fa-discord"></i> Join</button>
        </p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="https://i.pinimg.com/originals/50/05/db/5005dbccb59bc9929274c043b848eb84.gif" alt="coming" style="width:100%">
      <div class="container">
        <h2>Coming Soon</h2>
        <p class="title">Discord Community</p>
        <p>pending</p>
        <p><button class="button" onclick="window.location.href='/';"><i class="far fa-id-badge"></i> Geek Profile</button>
           <button class="button" onclick="window.location.href='https://discord.gg/pending'"><i class="fab fa-discord"></i> Join</button>
        </p>
      </div>
    </div>
  </div>
</div>

</div>
</center>
</body>
</html>

The reason there is a good deal of white space between some of the elements is that your row's height is dependent on the tallest element that it contains. The reality is that there is not as much whitespace between the element in row 2 compare to the 3rd element in row 1. In order to achieve little to now whitespace between elements of *varying* heights you will need to completely rewrite your markup and styling code and/or look at something like [metafizzy masonry](https://infinite-scroll.com/demo/masonry/). — justinw, Sep 20 '20 at 01:51

Padding / Alignment

0 Answers0