improve spacing/sizes on very low resolutions

static/site.css

@@ -68,3 +68,22 @@ html {
 .image-max-dimensions{
   max-width: 400px;
 }
+
+@media(max-width: 440px){
+   .event-responsive{
+      padding-left: 0;
+      font-size: 5vw;
+   }
+   .date-responsive{
+      margin-right: 4vw !important;
+   }
+   .container-responsive{
+      margin-left: 0;
+      margin-right: 0;
+      padding-left: 0;
+      padding-right: 0;
+   }
+   .mt-0-u440{
+      margin-top: 0 !important;
+   }
+}

static/toggle_button.css

@@ -60,4 +60,10 @@
 
   .switch-caption {
       float: left;
-  }
+  }
+
+@media(max-width: 440px){
+  .switch-caption{
+      font-size: 7vw !important;
+  }
+}

templates/events.html

@@ -6,17 +6,20 @@
     {% for event in events %}
       <div class="moreDates" {% if loop.index > 3 %} style="display: none;" {% endif %}>
         <div class="row">
-            <div class="pt-1 border-bottom {% if loop.index == 1 %} border-top {% endif %} col">
+            <div class="event-responsive pt-1 border-bottom 
+		    {% if loop.index == 1 %} border-top {% endif %} col">
               <div class="d-flex justify-content-center align-items-center">
-                <h1 class="mr-5 text-primary font-weight-bold text-info">{{ event["day"] }}</h1>
+                <h1 class="mr-5 text-primary font-weight-bold text-info date-responsive ">
-                  <div>
+		    {{ event["day"] }}
-                    <p class="font-weight-bold mb-0 text-dark">{{ event["month"] }}</p>
+		</h1>
-                    <p class="mb-2">{{ event["year"] }}</p>
+                <div>
-                  </div>
+                  <p class="font-weight-bold mb-0 text-dark">{{ event["month"] }}</p>
+                  <p class="mb-2">{{ event["year"] }}</p>
+                </div>
               </div>
             </div>
             <div class="pt-1 border-bottom {% if loop.index == 1 %} border-top {% endif %} col pl-3">
-              <p class="text-dark font-weight-bold mb-0">
+              <p class="event-responsive text-dark font-weight-bold mb-0">
                   {{ event["description"] }} 
                   {% if event.get("location") %} @{{ event["location"] }} {% endif %}
               </p>

templates/index.html

@@ -34,7 +34,7 @@
 
 <!-- main links -->
 <div class="bg-secondary">
-  <div class="container pb-2 pt-2">
+  <div class="container container-responsive pb-2 pt-2">
     {% include 'events.html' %}
   </div>
 </div>
@@ -54,15 +54,15 @@
     <div class="container pt-5 text-color-special">
 
       <div id="twitch-consent-placeholder" class="card bg-dark text-white">
-        <img style="min-width: 80%; min-height: 200px;"
+         <img style="min-width: 80%; min-height: 200px;"
-	     class="card-img" src="/static/pictures/{{ conf['twitch-placeholder-img'] }}" >
+            class="card-img" src="/static/pictures/{{ conf['twitch-placeholder-img'] }}" >
         <div class="card-img-overlay">
-          <label class="switch mt-3">
+          <label class="switch mt-3 mt-0-u440">
             <input id="toogle-twitch" class="custom-control-input"
               type="checkbox" onchange="handleToggle(this.id)">
             <span class="slider"></span>
           </label>
-          <div class="switch-caption ml-3 mt-3" style="font-size: x-large;">
+          <div class="switch-caption ml-3 mt-3 mt-0-u440" style="font-size: x-large;">
                   Laden externe Inhalte von Twitch.tv zulassen
           </div>
         </div>