responsive design

Sagar-Sharma-7 · Jul 26, 2023 · 704b865 · 704b865
1 parent 3fa0d87
commit 704b865
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 1 deletion.
diff --git a/public/style/style.css b/public/style/style.css
@@ -142,4 +142,45 @@ header #social_btn button:hover {
   cursor: pointer;
   background-color: black;
   border: 1px solid gray;
+}
+
+@media all and (max-width: 1000px) {
+  header #logo img {
+    height: 60px;
+  }
+  header #social_btn .insta_btn {
+    padding: 2px;
+    font-size: 28px;
+    background-color: transparent;
+    color: #000000;
+  }
+  header #social_btn .insta_btn span {
+    display: none;
+  }
+  .container .palettes_wrap {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media all and (max-width: 650px) {
+  header #logo img {
+    height: 50px;
+  }
+  .container .palettes_wrap {
+    grid-template-columns: repeat(1, 1fr);
+  }
+  .copy_wrap {
+    padding-bottom: 20px;
+  }
+  .copy_wrap .hexcode {
+    font-size: 12px;
+  }
+  .copy_wrap .hexcode .arrow {
+    display: none;
+  }
+  .copy_wrap .toggle_down {
+    bottom: 0;
+  }
+  .copy_wrap .copy_btn {
+    font-size: 12px;
+  }
 }/*# sourceMappingURL=style.css.map */
diff --git a/public/style/style.css.map b/public/style/style.css.map
diff --git a/public/style/style.scss b/public/style/style.scss
@@ -147,4 +147,62 @@ header{
             border: 1px solid gray;
         }
     }
+}
+
+// responsive for tablets
+@media all and (max-width:1000px){
+    header{
+        #logo{
+            img{
+                height: 60px;
+            }
+        }
+        #social_btn{
+            .insta_btn{
+                padding: 2px;
+                font-size: 28px;
+                background-color: transparent;
+                color: #000000;
+                span{
+                    display: none;
+                }
+            }
+        }
+    }
+    .container{
+        .palettes_wrap{
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+}
+
+// responsive for phones
+@media all and (max-width:650px){
+    header{
+        #logo{
+            img{
+                height: 50px;
+            }
+        }
+    }
+    .container{
+        .palettes_wrap{
+            grid-template-columns: repeat(1, 1fr);
+        }
+    }
+    .copy_wrap{
+        padding-bottom: 20px;
+        .hexcode{
+            font-size: 12px;
+            .arrow{
+                display: none;
+            }
+        }
+        .toggle_down{
+            bottom: 0;
+        }
+        .copy_btn{
+            font-size: 12px;
+        }
+    }
 }