Adds Adaptive

NZAlona · Oct 30, 2023 · 209e0f5 · 209e0f5
1 parent 4b240b5
commit 209e0f5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/picture/mobile.jpg b/picture/mobile.jpg
diff --git a/style.css b/style.css
@@ -7,8 +7,15 @@
 }
 
 body {
-  background-image: url(./picture/christmas-holidays-composition.jpg);
+  background-image: url(./picture/mobile.jpg);
   background-size: cover;
+  background-repeat: no-repeat;
+
+  @media screen and (min-width: 420px) {
+    background-image: url(./picture/christmas-holidays-composition.jpg);
+    background-size: cover;
+    /* background-repeat: no-repeat; */
+  }
 }
 
 .wrapper {
@@ -23,21 +30,34 @@ body {
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva,
     Verdana, sans-serif;
   line-height: 1.17;
-  margin-top: 520px;
+  margin-top: 360px;
+
+  @media screen and (min-width: 420px) {
+    margin-top: 520px;
+  }
 }
 
 .box-container {
   display: flex;
   justify-content: center;
-  gap: 45px;
-  margin-top: 25px;
+  gap: 8px;
+  margin-top: 23px;
+
+  @media screen and (min-width: 420px) {
+    gap: 45px;
+    margin-top: 25px;
+  }
 }
 
 .box-wrapper {
   height: 103px;
-  width: 103px;
+  width: 71px;
   border-radius: 3px;
   box-shadow: 1px 1px 1px 1px grey;
+
+  @media screen and (min-width: 420px) {
+    width: 103px;
+  }
 }
 
 .time-slot {