Блог

Это код страницы, которая просматривается на этих изображениях, нужно ли внести какие-либо изменения, чтобы сделать ее более адаптивной в мобильном браузере Chrome?

 <!---To Display Timetable Entries----->
<div class="container"><br>
  <span style="font-family:'Futura';font-weight:bold;"><h2>TimetableMatch</h2></span>
  <hr>
  <div style="overflow-x:auto;">
    <table class="table table-dark">
      <thead>
        <tr>
          <th>Module</th>
          <th>Day</th>
          <th>Time</th>
          <th>Area</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for entry in entrys %}
        <tr>
          <td>{{ entry.module }}</td>
          <td>{{ entry.day }}</td>
          <td>{{ entry.time }}</td>
          <td>{{ entry.location }}</td>

          <td><a class="btn btn-info" href="../edit/{{ entry.id }}">Edit</a>
            <br>
            <br>
            <a class="btn btn-danger" href="../delete/{{ entry.id }}">Delete</a>
          </td>

        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="row">
    <div class="col-md-4 col-lg-2">
      <a class="btn btn-primary" href="../add_entry/">Add Timetable Entry</a>
      <br>
      <br>
      <a href="{% url 'homepage' %}">
        <button type="button" class="btn btn-primary btn-xs"> Back to home</button></a>
      <a href="{% url 'index' %}">
        <br>
        <br>
        <button type="button" class="btn btn-primary">Logout</button> </a>
    </div>
  </div>
</body>
  

Браузер CHROME для IOS

Браузер Chrome для ноутбука