Site OK on computer but not in smartphone

Question

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.

Answer 1

You need to make your site responsive, you can either use frameworks, columns, rows, containers, or media screens.

Answer 2

Have you tried margin-right: 10px; on the title?

Answer 3

In your style.css add this:

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

and add to all of this divs above id:

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

Refresh page or clean cache to see changes.