如何分离仅在移动设备上相互卡住的两个元素？答案

【问题标题】：How to separate two elements that are stuck on each other only on mobile devices?如何分离仅在移动设备上相互卡住的两个元素？
【发布时间】：2022-07-20 18:41:18
【问题描述】：

Here's how it looks on mobile devices

Here's how it looks on desktops and laptops

我不是专家，但我的任务是这样做，这是基于我找到的一个模板，其中包含一些 javascript，但当涉及到 javascript 时，我真的不知道在哪里寻找。我只是希望它们看起来是分开的，最好是一个在另一个之上，我怎样才能通过 css 和 html 做到这一点？

CSS 和 HTML

  a.main-filled-button {
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #fff;
  text-transform: uppercase;
  color: #000dff;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 20px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;

}

a.main-filled-button:hover {
  color: #fff;
  background-color: #000dff;
}

<div class="item">
            <div class="img-fill">
                <img src="assets/images/slide-02.jpg" alt="">
                <div class="text-content">
                  <h3>WELCOME TO AKSM</h3>
                  <h5>Leading surveying company</h5>
                  <a href="https://www.aksm.gr/wp-content/uploads/2020/03/%CE%9CME_WEBENa-1.pdf" class="main-filled-button">EPAnEK 2014-2020</a>
                  <a href="https://www.aksm.gr/wp-content/uploads/2021/06/aksm-prodiagrafes-popup.jpg" class="main-filled-button">ΠΡΟΔΙΑΓΡΑΦΕΣ</a>
                </div>
            </div>
          </div>

【问题讨论】：

标签： html css

【解决方案1】：

添加边距

 a.main-filled-button {
   margin: 10px 0;
 }

【讨论】：

【解决方案2】：

在 css 文件中添加移动设备的媒体查询

@media (max-width: 640px) {
  .main-filled-button {
    margin-top: 20px;
  }
}

【讨论】：