From 42ce5c2593fe5fc8b54ff05f386648a960535a45 Mon Sep 17 00:00:00 2001 From: Simon Catanese Date: Fri, 6 Jan 2023 12:21:53 +0100 Subject: [PATCH] YAY --- css/index.css | 59 ++++++++++++++++++++++++----------- css/style.css | 3 +- index.php | 85 +++++++++++++++++++++++++++------------------------ 3 files changed, 89 insertions(+), 58 deletions(-) diff --git a/css/index.css b/css/index.css index 7a5b66b..55bade6 100755 --- a/css/index.css +++ b/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%; + } } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 64919ef..49f5540 100755 --- a/css/style.css +++ b/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; diff --git a/index.php b/index.php index 2532aa3..47be66d 100755 --- a/index.php +++ b/index.php @@ -23,47 +23,52 @@
-
-
- +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-