Merge pull request #3 from ramiadi/design-for-mobile-users

Update style.css
ramiadi · Oct 2, 2024 · 045e67a · 045e67a
2 parents 8ba0829 + f84b58d
commit 045e67a
Showing 1 changed file with 16 additions and 30 deletions.
diff --git a/stylesheet/style.css b/stylesheet/style.css
@@ -1,18 +1,18 @@
-@media (min-width: 768px) {
-  .recipe-box img {
-    width: 80%;
-  }
-}
-
-@media (max-width: 767px) {
+@media (max-width: 600px) {
   .recipe-box img {
     width: 100%;
   }
+  .recipe-box {
+    min-width: 100vw;
+    min-height: 100vh;
+  }
+  body {
+    margin: 0;
+  }
 }
 
 body {
   background-color: hsl(30, 54%, 90%);
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -21,9 +21,9 @@ body {
 .recipe-box {
   background-color: hsl(0, 0%, 100%);
   width: 50%;
-  text-align: left;
   padding: 2em;
   margin: 6em;
+  border-radius: 10px;
 }
 .recipe-box img {
   width: 100%;
@@ -46,45 +46,31 @@ body {
   padding: 1.25em;
   line-height: 2em;
 }
-.preparation-box li {
-  padding-left: 1em;
-  margin-left: -0.5em;
-  font-size: 1.1em;
-}
+
 .preparation-box span {
   color: hsl(332, 51%, 32%);
   font-size: 1.3em;
   font-weight: 700;
   margin-left: -2em;
 }
 
-.ingredients span {
-  color: hsl(14, 45%, 36%);
-  font-weight: 700;
-  font-size: 1.8em;
-  margin-left: -1.5em;
-}
-.ingredients li {
-  margin-left: -1em;
-  padding-left: 1em;
-  font-size: 1.1em;
-  color: hsl(30, 10%, 34%);
-  line-height: 1.5em;
-}
-
+.ingredients span,
 .instructions span {
   color: hsl(14, 45%, 36%);
   font-weight: 700;
   font-size: 1.8em;
-  margin-left: -1.5em;
+  margin-left: -1.45em;
 }
-.instructions li {
+.ingredients li,
+.instructions li,
+.preparation-box li {
   margin-left: -1em;
   padding-left: 1em;
   font-size: 1.1em;
   color: hsl(30, 10%, 34%);
   line-height: 1.5em;
 }
+
 .instructions li::marker {
   color: hsl(14, 45%, 36%);
   font-weight: 700;