Я пытаюсь выяснить, как убрать верхние поля при просмотре на небольших экранах (мобильный, планшет)

Question

Я использую бутстрап и у меня есть макет.У меня есть строка с 4 столбцами, и у каждого содержимого в div есть разные верхние поля.Это дает каскадный эффект и хорошо выглядит на рабочем столе.Проблема в том, что при просмотре на небольших экранах поле остается и остается большой разрыв между контентом.Я бы хотел, чтобы div делился с небольшим (10px) пробелом между ними.Я попытался поиграть с CSS и попытался добавить @media, но все равно получил большое пространство.

Это HTML:

<div class="container" style='min-height:600px'><br>
    <div class='row'>
        <div class='col-sm-3' id='col-1'>
            <div class='col-1-box'></div>
        </div>
        <div class='col-sm-3' id='col-2'>
            <div class='col-2-box'></div>
        </div>
        <div class='col-sm-3' id='col-3'>
            <div class='col-3-box'></div>
        </div>
        <div class='col-sm-3' id='col-4'>
            <div class='col-4-box'></div>
        </div>
    </div>
</div>

И это ОБНОВЛЕННЫЙ CSS:

<style>
@media only screen and (max-width: 600px) {
  .col-1-box, .col-2-box, .col-3-box, .col-4-box {
    margin-top: 3%;
  }
}
#col-1{
    background-color:;

}
#col-2{
    background-color:;

}
#col-3{
    background-color:;

}
#col-4{
    background-color:;

}
.col-1-box{
    margin-top:0%;
    padding:0px 10px 0 10px;
    min-height:400px;
    background-color:white;
    box-shadow: 2px 4px 7px -2px #6E6E6E;
}
.col-2-box{
    margin-top:25%;
    padding:0px 10px 0 10px;
    min-height:400px;
    background-color:white;
    box-shadow: 2px 4px 7px -2px #6E6E6E;
}
.col-3-box{
    margin-top:50%;
    padding:0px 10px 0 10px;
    min-height:400px;
    background-color:white;
    box-shadow: 2px 4px 7px -2px #6E6E6E;
}
.col-4-box{
    margin-top:75%;
    padding:0px 10px0 10px;
    min-height:400px;
    background-color:white;
    box-shadow: 2px 4px 7px -2px #6E6E6E;
}
</style>

Answer 1

Большой разрыв между контентом, это вызывает min-height, поэтому попробуйте установить его на ноль, а margin-top на 10 пикселей.Попробуйте это

@media (min-width: 481px) and (max-width: 767px) {
  #col-1, #col-2, #col-3, #col-4{
    min-height:0px;
  }
  .col-2-box, .col-3-box, .col-4-box{
    margin-top: 10px;
  }
}

    #col-1{
        background-color:;
        min-height:500px;
    }
    #col-2{
        background-color:;
        min-height:500px;
    }
    #col-3{
        background-color:;
        min-height:500px;
    }
    #col-4{
        background-color:;
        min-height:500px;
    }
    .col-1-box{
        margin-top:0%;
        padding:0px 10px 0 10px;
        min-height:200px;
        background-color:white;
        box-shadow: 1px 1px 3px #6E6E6E;
    }
    .col-2-box{
        margin-top:25%;
        padding:0px 10px 0 10px;
        min-height:200px;
        background-color:white;
        box-shadow: 1px 1px 3px #6E6E6E;
    }
    .col-3-box{
        margin-top:50%;
        padding:0px 10px 0 10px;
        min-height:200px;
        background-color:white;
        box-shadow: 1px 1px 3px #6E6E6E;
    }
    .col-4-box{
        margin-top:75%;
        padding:0px 10px0 10px;
        min-height:200px;
        background-color:white;
        box-shadow: 3px 3px 8px -4px #6E6E6E;
    }
    
    @media (min-width: 481px) and (max-width: 767px) {
      #col-1, #col-2, #col-3, #col-4{
        min-height:0px;
      }
      .col-2-box, .col-3-box, .col-4-box{
        margin-top: 10px;
      }
    }

<div class="container" style='min-height:600px'>
    <br>
    <div class='row'>
        <div class='col-sm-3' id='col-1'>
            <div class='col-1-box'></div>
        </div>
        <div class='col-sm-3' id='col-2'>
            <div class='col-2-box'></div>
        </div>
        <div class='col-sm-3' id='col-3'>
            <div class='col-3-box'></div>
        </div>
        <div class='col-sm-3' id='col-4'>
            <div class='col-4-box'></div>
        </div>
    </div>
</div>

Answer 2

Вам просто нужно добавить медиа-запрос к вашему CSS, который изменит заполнение на мобильном телефоне.

@media only screen and (max-width: 600px) {
  .col-2-box, .col-3-box, .col-3-box, .col-4-box {
    margin-top: 10px;
  }
}

У вас также есть опечатка в ваших .col-4-box стилях. Измените отступы на padding:0px 10px 0 10px;