Удалите левое поле из тега <a>на мобильном устройстве с помощью CSS

Question

У меня есть текст, заключенный в тег 'a' с некоторым левым полем. Левое поле помогает отделить его от кнопки, которая находится непосредственно слева от него (на рабочем столе / планшетах). Это хорошо работает для настольных компьютеров / планшетов, но на мобильных устройствах тег «a» перемещается прямо под кнопкой, что означает, что больше нет необходимости в левом поле. Как снять маржу только для мобильных пользователей? Или, более конкретно, как мне удалить левое поле, когда тег «a» перемещается под кнопкой? Я приложил несколько скриншотов того, о чем я говорю, и код кнопки и тега «a».

Код для двух элементов:

<div class="btn-group-one wow fadeInUp" data-wow-delay="500ms" data-wow-duration="1000ms">
    <a class="btn saasbox-btn white-btn mt-3" href="#">WEB APP</a>
    <a class="btn saasbox-btn-2 mt-3 ml-4" href="#">iOS &amp; Android Apps Coming Soon</a>
</div>

* Примечание: «классы» mt-3, ml-4 и ml-4 происходят из Bootstrap. 'Ml-4' дает элементу некоторое поле 'rem' слева.

MOBILE:

DESKTOP:

Answer 1

Вы можете уменьшить ширину вашего браузера и зарегистрировать размер ширины в пикселях, когда тег перемещается под кнопку. Например, это произошло в 300 пикселей.

И добавьте класс в свой тег, например, mobilemargin, и в свой связанный css файл добавьте следующее

   @media only screen and (max-width: 300px) {
     .mobilemargin {
       margin-left: 0px;
     }
   }

Answer 2

Классы полей Bootstrap имеют параметры точки останова c (ie указанная ширина экрана c), поэтому вы можете установить поле только для настольных компьютеров, например ml-md-4, где «md» - средний экран ширина. В зависимости от того, какая точка останова заставляет тег a переноситься под кнопку, вам, возможно, придется выбрать «sm», «lg», et c.

Полная документация на https://getbootstrap.com/docs/4.4/utilities/spacing/