Как добавить пространство, когда кнопки изменяются с горизонтального на вертикальное расположение на отзывчивый?

Question

Я застрял в этом вопросе некоторое время и не могу понять это. Использование bootstrap.

На моей веб-странице, когда я использую экран компьютера, мои кнопки появляются рядом с промежутком между каждой кнопкой. Это выглядит идеально.

Теперь, когда я смотрю на экране мобильного телефона, кнопки появляются вертикально, друг над другом, что я и хочу. Проблема в том, что между кнопками нет места. Кажется, что они слиплись вертикально, и я некоторое время пытался понять, как создать это пространство.

<a href="https://www.eventbrite.co.uk/e/xx-xx"> <button type="button" class="custombtn">View Our Workshop </button> </a>

<a href="courses/course-BRFAITC009"> <button type="button" class="custombtn">View Our Online Course</button> </a>

<button type="button" class="custombtn" id="checkout-button-sku_GtmnPXrxkiDt4F" role="link">Retake Online Examination</button>

</div>    

.course-btns {
     width: 100%;
     display: inline;

}

.custombtn {
    margin-right:1em;
    margin-top: 1em;
    margin-bottom:1em;
}


@media only screen and (min-width: 600px) {

    .course-btns {
     display: block;
}
    .custombtn {
    margin-bottom:1em;
}

  }

Answer 1

Ваш медиа-запрос будет @media only screen and (max-width: 600px) {...}

Answer 2

Я думаю, что для мобильного экрана вы можете использовать max-width: 600px вместо min-width, потому что min-width: 600px будет нацеливать размер экрана до 600 пикселей, а max-width: 600px будет нацеливаться ниже 600px