Site OK on computer but not in smartphone

My site appears correctly on computer screens, but not on smartphones.

Like you can see, the main title (Phytothérapie) is cut and and the three buttons are not centered.

My code :

<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>

and for the 3 blocks :

<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>

The URL of the site is https://overlap.ulb.be/public/

Thank you in advance for help.