From 7373cedc099aca18f2778c3f69d5f6d2980e78c1 Mon Sep 17 00:00:00 2001
From: Holger Seehausen <seehausen@gmx.de>
Date: Sat, 30 Jul 2022 13:40:07 +0200
Subject: [PATCH] Fixed responsive layout problem in bigger screens (at least
 it does not break anymore)

---
 src/history.html.tmpl | 42 ++++++++++++++----------------------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/src/history.html.tmpl b/src/history.html.tmpl
index 7091359..72f1cc1 100644
--- a/src/history.html.tmpl
+++ b/src/history.html.tmpl
@@ -28,7 +28,7 @@
         <main>
             <div class="container-fluid d-flex-xxl">
                  <div class="row mt-5 mb-4 graphrow align-content-start">
-                    <div class="col-md-8 main" >
+                    <div class="col-sm">
                         <div class="card">
                             <div class="card-body text-center" style="position: relative;">
                                 <h4 class="h5-responsive indigo-text">$Extras.Translations[$Extras.language].min_temp</h4>
@@ -36,49 +36,39 @@
                             </div>
                         </div>
                     </div>
-                 </div>
-                 <div class="row mt-5 mb-4 graphrow align-content-start">
-                     <div class="col-md-8 main" >
+                    <div class="col-sm">
                         <div class="card">
                             <div class="card-body text-center" style="position: relative;">
                                 <h4 class="h5-responsive indigo-text">$Extras.Translations[$Extras.language].avg_temp</h4>
                                 $avg_temp_table
                             </div>
                         </div>
-                     </div>
-                 </div>
-                 <div class="row mt-5 mb-4 graphrow align-content-start">
-                     <div class="col-md-8 main" >
+                    </div>
+                    <div class="col-sm">
                         <div class="card">
                             <div class="card-body text-center" style="position: relative;">
                                 <h4 class="h5-responsive indigo-text">$Extras.Translations[$Extras.language].max_temp</h4>
                                 $max_temp_table
                             </div>
                         </div>
-                     </div>
-                 </div>
-                 <div class="row mt-5 mb-4 graphrow align-content-start">
-                     <div class="col-md-8 main" >
+                    </div>
+                    <div class="col-sm">
                         <div class="card">
                             <div class="card-body text-center" style="position: relative;">
                                 <h4 class="h5-responsive indigo-text">$Extras.Translations[$Extras.language].rain</h4>
                                 $rain_table
                             </div>
                         </div>
-                     </div>
-                 </div>
-                 <div class="row mt-5 mb-4 graphrow align-content-start">
-                     <div class="col-md-8 main" >
+                    </div>
+                    <div class="col-sm">
                         <div class="card">
                             <div class="card-body text-center" style="position: relative;">
                                 <h4 class="h5-responsive indigo-text">$Extras.Translations[$Extras.language].rain_days</h4>
                                 $rain_days_table
                             </div>
                         </div>
-                     </div>
-                 </div>
-                 <div class="row mt-5 mb-4 graphrow align-content-start">
-                     <div class="col-md-8 main" >
+                    </div>
+                    <div class="col-sm">
                         <div class="card">
                             <div class="card-body text-center" style="position: relative;">
 
@@ -86,10 +76,8 @@
                         $max_wind_table
                             </div>
                         </div>
-                     </div>
-                 </div>
-                 <div class="row mt-5 mb-4 graphrow align-content-start">
-                     <div class="col-md-8 main" >
+                    </div>
+                    <div class="col-sm">
                         <div class="card">
                             <div class="card-body text-center" style="position: relative;">
 
@@ -97,10 +85,8 @@
                         $avg_wind_table
                             </div>
                         </div>
-                     </div>
-                 </div>
-                 <div class="row mt-5 mb-4 graphrow align-content-start">
-                     <div class="col-md-8 main" >
+                    </div>
+                    <div class="col-sm">
                         <div class="card">
                             <div class="card-body text-center" style="position: relative;">