YAY

css/index.css

@@ -16,28 +16,53 @@
     overflow: scroll;
   }
   
-  .Product{
-    float:left;
-    margin : 5%;
-    width: 80%;
-  }
-  .Product p, .Product h3{
-    margin-top: -5px;
-  
-  }
-  
-  .memeContainer {
-    position: absolute;
-    width:25wh;
+  /*.memeContainer {
+    border-color: black;
+    border-width: 1px;
+    border-style: solid;
+    width:25%;
     padding-bottom: 25%;
     float: left;
     margin : 5%;
     height: 0;
-  
   }
   .meme{
-    width: inherit;
-    height: inherit;
-    position: absolute;
+    width: 100%;
     left: 0;
+  }*/
+
+
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 4px;
+  }
+  
+  /* Create deux equal columns that sits next to each other */
+  .column {
+    flex: 50%;
+    max-width: 50%;
+    padding: 0 4px;
+  }
+  
+  .column img {
+    margin-top: 8px;
+    vertical-align: middle;
+    width: 100%;
+  }
+  
+  /* Responsive layout - makes a two column-layout instead of four columns */
+  @media screen and (max-width: 800px) {
+    .column {
+      flex: 100%;
+      max-width: 100%;
+    }
+  }
+  
+  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+  @media screen and (max-width: 600px) {
+    .column {
+      flex: 100%;
+      max-width: 100%;
+    }
   }

css/style.css

@@ -42,8 +42,9 @@ main{
 .pubG img{
   margin-top: 50%;
   width:100%;
-  border:1px;
   border-color: black;
+  border-width: 1px;
+  border-style: solid;
 }
 .pubD{
   grid-column-start : 3;

index.php

@@ -23,7 +23,9 @@
         </div>
         <main>
             <div class="page">
-                <section class=Liste>
+                <section class="Liste">
+                    <div class="row">
+                        <div class="column">
                             <div class="memeContainer">
                                 <img src="img/meme/bouton.jpg" class=meme>
                             </div>
@@ -45,6 +47,8 @@
                             <div class="memeContainer">
                                 <img src="img/meme/shitting.jpg" class=meme height="500vw" width="500vw">
                             </div>
+                        </div>
+                        <div class="column">
                             <div class="memeContainer">
                                 <img src="img/meme/sodarameme.jpg" class=meme height="500vw" width="500vw">
                             </div>
@@ -63,7 +67,8 @@
                             <div class="memeContainer">
                                 <img src="img/meme/sodabaguette.png" class=meme height="500vw" width="500vw">
                             </div>
-                                                                                      
+                        </div>                      
+                    </div>
                 </section>
             </div>
         </main>