网站在电脑上正常，但在智能手机上不行

Question

我的网站在计算机屏幕上正确显示，但在智能手机上却没有。

如您所见，主标题（Phytothérapie）被剪掉了，三个按钮没有居中。

我的代码：

<div class="col-12">
          <div class="row">
            <div class="col-12">
              <h1 class="mg-md h1-welcome-to-style tc-black">Bienvenue à la</h1>
              <h1 class="mg-md h1-bloc-0-style tc-black"><span style="font-size: 2rem !important;">FACULTÉ DE PHARMACIE DE L'ULB</span></h1>
              <h1 class="mg-sm tc-black h1-3-style"><span style="font-size: 70px !important;">PHYTOTHÉRAPIE</span></h1>
              <h2 class="mg-md tc-black h2-1-style"></h2>
            </div>
          </div>

对于 3 个区块：

<div class="phyto-container" onclick="location.href='{{$route}}';">
<div class="phyto-front" style="background-image: url({{$bgImage}})">
  <div class="phyto-inner">
    <p>{{ $titleFront }}</p>
  </div>
</div>

<div class="phyto-back">
  <div class="phyto-inner">
    <div>
      @foreach($paragraphs as $p)
        <p style="font-size: 1.1rem;margin-top:-10px !important; margin-left:-1px !important;">{{ $p }}</p>
      @endforeach
    </div>
  </div>
</div>

该站点的URL是https://overlap.ulb.be/public/

提前感谢您的帮助。

Answer 1

您需要使您的网站具有响应性，您可以使用框架、列、行、容器或媒体屏幕。

Answer 2

你试过 margin-right: 10px; 在标题上？

Answer 3

在你的 style.ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 添加这个：

#unsets {
width: unset !important;
position: unset !important;
padding: unset !important;
margin: 10px;
}

并添加到 id 上面的所有这些 div 中：

<div class="col-sm-4 col-md-2 col-lg-2 col-xl-2 align-self-center" id="unsets">

刷新页面或清理缓存以查看更改。