поправил страницу выбора места

CineSync/static/css/timetable/session.css

@@ -1,26 +1,21 @@
 .seats_card {
-    width: 100%;
     background-color: #eaeaea;
-    margin-top: 1vw;
-    margin-bottom: 1vw;
     border-radius: 3vw;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: center;
 
     width: 50%;
     margin: 0 auto;
     margin-top: 2vw;
+
+    overflow-x: auto;
+    overflow-y: auto;
 }
 .card_body {
     width: 80%;
-    margin-top: 18vw;
-    margin: 0 auto;
-}
-.rows {
-    margin-top: 7vw;
 }
 .line {
     width: 30%;
@@ -55,6 +50,38 @@ h6 {
     margin-top: 4vw;
     object-fit: cover;
     height: 20vw !important;
-    width: 50% !important;
+    width: 12vw !important;
     border-radius: 3vw;
 }
+.film_info_block {
+    margin-right: 25%;
+    margin-left: 25%;
+    width: 50%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: flex-end;
+}
+.film_info_text_block {
+    height: 20vw;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+    margin: 2vw;
+}
+.film_info_text {
+    color: #eaeaea;
+}
+.cell {
+    background-color: transparent !important;
+}
+.cell {
+    height: 4vw;
+    width: 3.5vw;
+}
+.row_number_cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

CineSync/templates/base.html

@@ -13,7 +13,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/favicon-16x16.png' %}">
     <link rel="manifest" href="{% static 'img/site.webmanifest' %}">
     <link rel="icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}">
-    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
+    <link href="{% static 'css/bootstrap/bootstrap.min.css' %}" rel="stylesheet">
     <link rel="stylesheet" href="{% static 'css/includes/header.css' %}"/>
     <link rel="stylesheet" href="{% static 'css/base.css' %}"/>
     <meta name="msapplication-TileColor" content="#da532c">

CineSync/templates/timetable/session.html

@@ -7,35 +7,37 @@
 {% block content %}
 <link href="{% static 'css/style.css' %}" rel="stylesheet">
 <link href="{% static 'css/timetable/session.css' %}" rel="stylesheet">
-<div style="text-align: center;">
+<div class="film_info_block">
     <img src="{{ session.film.image.url }}" class="film_session_image"
          alt="Фотография фильма не найдена">
+    <div class="film_info_text_block">
+        <h1 class="film_info_text">{{ session.film.name }}</h1>
+        <p class="film_info_text">{{ session.auditorium.number }}</p>
+        <p class="film_info_text">{{ session.start_datetime }}</p>
+    </div>
 </div>
 <div class="seats_card" style="height: {{ height }}vw;">
     <div class="card_body">
-    <h1>{{ session.film.name }}</h1>
+        <table>
-    {{ session.auditorium.number }}<br>
+            <tbody>
-    {{ session.start_datetime }}
-    <div class="rows">
-      <div class="line">
-        <h6>Экран</h6>
-      </div>
             {% for row in session.auditorium.row_count|get_range %}
-        <div class="row">
+            <tr>
+                <td class="row_number_cell cell">{{ row }}</td>
                 {% for seat in seats %}
-          <div class="film_card_row col-auto">
+                <td class="cell">
                     <a class="film_session">
                         <span class="seat_number">{{ seat.row_number }}</span>
                     </a>
-          </div>
+                </td>
                 {% endfor %}
-          {{ row }}
+            </tr>
-        </div>
             {% endfor %}
-    </div>
+            </tbody>
-    <div style="text-align: center">
+        </table>
+        <div>
             <button class="btn btn-primary buy_btn">Купить билет</button>
         </div>
     </div>
 </div>
+
 {% endblock %}