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

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.