Блок переносится с огромным отступом

Question

Пытался сделать один из своих элементов сайта адаптивным, поэтому требовалось перенесение двух столбцов, при определённом уменьшении ширины экрана. Однако, после переноса двух колонок, одна из колонок образует огромный отступ размером с саму себя, что, конечно же, недопустимо. Вот код данной "адаптивной таблицы":

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

.column {
    float: left;
    width: 25%;
    padding: 10px;
    height: 50%;
}

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

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

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

#table-button {
    font-size: 1.5em;
}

.button {
    background-color: white;
    border: none;
    width: 100%;
    border-radius: 0px 0px 14px 14px;
}

.table-image {
    width: 20%;
    height: table-button;
    display:block;
    margin:auto;
}

.product {
    box-shadow: 4px 4px 12px 1px #666;
    border-radius: 14px;
}
</style>
</head>
<body>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <div class="product" id="f-col_f-line">
        <h2><img src="/jpg/bulb.png" class="table-image"></h2>
        <p><button class="button" id="table-button"><a href="@.html">a</a></button></p>
    </div>
    <div class="product"  id="f-col_s-line">
        <h2><img src="/jpg/unvisible.png" class="table-image"></h2>
        <p><button class="button" id="table-button"><a href="@.html">a</a></button></p>
    </div>
    <div class="product"  id="f-col_t-line">
        <h2><img src="/jpg/door.png" class="table-image"></h2>
        <p><button class="button" id="table-button"><a href="@.html">first column and third line</a></button></p>
    </div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <div class="product"  id="s-col_f-line">
        <h2><img src="/jpg/cart.png" class="table-image"></h2>
        <p><button class="button" id="table-button"><a href="@.html">a</a></button></p>
    </div>
    <div class="product"  id="s-col_s-line">
        <h2><img src="/jpg/helicopter.png" class="table-image"></h2>
        <p><button class="button" id="table-button"><a href="@.html">a</a></button></p>
    </div>
    <div class="product"  id="s-col_t-line">
        <h2><img src="/jpg/mail.png" class="table-image"></h2>
        <p><button class="button" id="table-button"><a href="@.html">a</a></button></p>
    </div>
  </div>
  <div class="column" style="background-color:#ccc;">
    <div class="product"  id="t-col_f-line">
        <h2><img src="/jpg/chem.png" class="table-image"></h2>
        <p><button class="button" id="table-button"><a href="1.html">a</a></button></p>
    </div>
    <div class="product"  id="t-col_s-line">
        <h2><img src="/jpg/down.png" class="table-image"></h2>
        <p><button class="button" id="table-button"><a href="@.html">a</a></button></p>
    </div>
    <div class="product"  id="t-col_t-line">
        <h2><img src="/jpg/time.png" class="table-image"></h2>
        <p><button class="button" id="table-button"><a href="@.html">a</a></button></p>
    </div>
  </div>
  <div class="column" style="background-color:#ddd;">
    <div class="product"  id="a-col_f-line">
        <h2><img src="/jpg/person.png" class="table-image"></h2>
        <p><button class="button" id="table-button"><a href="3.html">а</a></button></p>
    </div>
    <div class="product"  id="a-col_s-line">
        <h2><img src="/jpg/msn.png" class="table-image"></h2>
        <p><button class="button" id="table-button"><a href="@.html">a</a></button></p>
    </div>
    <div class="product"  id="a-col_t-line">
        <h2><img src="/logo.png" class="table-image"></h2>
        <p><button class="button" id="table-button"><a href="@.html">a</a></button></p>
    </div>
  </div>
</div>
</body>
</html>

Надеюсь, что я не слишком сильно накосячил...

БЛОГ НА HUSL

Блок переносится с огромным отступом

Ответы (0 шт):