responsivität

CSS/Element/card.css

@@ -24,18 +24,23 @@ body {
     color: white;
     text-align: left;
     max-width: 1000px;
-    margin: 0 auto;
-    padding-left: 230px;
     margin-bottom: 30px;
 }
 
 .course-grid {
     display: flex;
     flex-wrap: wrap;
-    gap: 30px;
-    margin: 0 auto;
+    gap: 40px;
+    margin-left: 20px;
 }
 
+@media screen and (max-width: 765px) {
+    .course-grid{
+        margin-left: 0;
+    }
+}
+
+
 .course-card {
     background: var(--brand-white);
     border-radius: 12px;

CSS/Element/filter_box.css

@@ -2,7 +2,6 @@
     background: #EB8202;
     color: #fff;
     padding: 1em;
-    max-width: 300px;
     border-radius: 8px;
     font-family: sans-serif;
     margin-bottom: 1em;

CSS/Element/form.css

@@ -51,6 +51,12 @@ textarea {
   margin: auto;
 }
 
+@media screen and (max-width: 1024px) {
+  .form-grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
 .form-grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -113,3 +119,9 @@ form .error {
   background: transparent!important;
   border: transparent!important;
 }
+
+@media only screen and (max-width: 500px) {
+ .input-transparent{
+   display: none;
+ }
+}

CSS/style.css

@@ -24,6 +24,7 @@ body {
   color: var(--brand-white);
   font-size: 15px;
   margin: 0;
+  overflow-x: hidden;
 }
 
 h1 {
@@ -48,6 +49,13 @@ main {
   margin-top: 190px;
 }
 
+@media screen and (max-width: 1024px) {
+  main{
+    margin-top: 50px;
+  }
+}
+
+
 .msg {
   text-align: center;
   font-size: 17px;
@@ -110,6 +118,14 @@ main {
   align-items: center;
 }
 
+@media only screen and (max-width: 500px) {
+  .d-flex-between{
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+  }
+}
+
 .hover:hover {
   opacity: 0.75;
   text-decoration: none;

CSS/style_columns.css

@@ -9,17 +9,29 @@
 
 .container {
     max-width: 90%;
-    padding: 24px 42px 24px 42px;
+  /*  padding: 24px 42px 24px 42px; */
     margin: 0 auto;
     color: var(--brand-white);
 }
 
+@media only screen and (max-width: 500px) {
+    .container {
+        padding: 5px;
+    }
+}
+
 .row {
     display: flex;
     flex-flow: row;
     flex-wrap: wrap;
 }
 
+@media (max-width: 800px) {
+    .row {
+        display: block;
+    }
+}
+
 /*** Spaltendefinitionen Smartphone Ansicht ***/
 @media (max-width: 529px) {
     .col-s-12 {
@@ -33,16 +45,19 @@
 }
 
 /*** Spaltendefinitionen Tablet Ansicht ***/
-@media (min-width: 530px) {
+@media (min-width: 750px) {
     .col-m-1 {
         flex: 0 0 100%;
     }
+
     .col-m-4 {
         flex: 0 0 33.3333333%;
     }
+
     .col-m-6 {
         flex: 0 0 50%;
     }
+
     .col-m-12 {
         flex: 0 0 100%;
     }
@@ -53,21 +68,35 @@
     .col-1 {
         flex: 0 0 8.3333333%;
     }
+
     .col-3 {
         flex: 0 0 25%;
     }
+
     .col-4 {
         flex: 0 0 33.3333333%;
     }
+
+    .col-card-4{
+        flex: 1 1 calc((100% - (3 - 1) * 40px) / 3);
+    }
+
     .col-5 {
         flex: 0 0 41.6666667%;
     }
+
     .col-6 {
         flex: 0 0 50%;
     }
+
     .col-8 {
         flex: 0 0 66.66666667%;
     }
+
+    .col-9{
+        flex: 0 0 75%;
+    }
+
     .col-12 {
         flex: 0 0 100%;
     }

Views/Welcome/showWelcome.phtml

@@ -14,7 +14,7 @@ $location = $_GET['location'] ?? '';
             <p class="welcome-subheading">Alle Kurse in deiner Nähe – auf einen Blick</p>
 
             <div class="row">
-        <div class="col-4">
+                <div class="col-3 col-m-12">
                     <div class="filter-box">
                         <form method="get">
                             <label for="rating">Bewertung:</label>
@@ -36,7 +36,7 @@ $location = $_GET['location'] ?? '';
                     </div>
                 </div>
 
-            <div class="col-8">
+                <div class="col-9">
                     <!-- KURSLISTE -->
                     <div class="course-grid row">
                         <?php
@@ -100,7 +100,7 @@ $location = $_GET['location'] ?? '';
                         }
 
                         foreach ($filteredKurse as $kurs): ?>
-                        <div class="course-card col-4">
+                            <div class="course-card col-card-4 col-m-6">
                                 <div class="course-image"></div>
                                 <div class="course-content">
                                     <div class="course-left">
@@ -121,8 +121,6 @@ $location = $_GET['location'] ?? '';
             </div>
 
 
-
-
         </div>
     </div>
 </div>

Views/header.phtml

@@ -14,6 +14,9 @@
 </head>
 
 <body>
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
                 <header>
                     <nav class="d-flex-between">
                         <a id="logo" href="index.php">bib<span>course</span></a>
@@ -34,5 +37,8 @@
                         </div>
                     </nav>
                 </header>
+            </div>
+        </div>
+    </div>
     <!-- TODO Transparent mit Fehleranzeige bei der Anmeldung -->
     <main>