Hide picture on small screens

jjia1 · Nov 1, 2022 · 66eccd3 · 66eccd3
1 parent 0bd4910
commit 66eccd3
Showing 1 changed file with 53 additions and 22 deletions.
diff --git a/styles/HomePage.module.css b/styles/HomePage.module.css
@@ -1,5 +1,18 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
 
+
+.picture_boader {
+  border: 10px solid rgba(64, 102, 97, 0.5);
+  border-radius: 250px;
+  object-fit: cover;
+}
+
+.picture {
+  border-radius: 250px;
+  display: hidden;
+  object-fit: cover;
+}
+
 .container {
   display: flex;
   justify-content: center;
@@ -111,22 +124,28 @@
   .background {
     font-size: 8.5rem;
   }
+
   .content {
     padding: 0 3rem;
   }
+
   .name {
     font-size: 6rem;
   }
+
   .bio {
     font-size: 3rem;
     margin-bottom: 5rem;
   }
+
   .button {
     font-size: 2rem;
   }
+
   .outlined {
     font-size: 2rem;
   }
+
   .illustration {
     height: 900px;
     width: 700px;
@@ -138,42 +157,56 @@
   .background {
     display: none;
   }
+
   .container {
     display: block;
   }
+
   .foreground {
     margin: 4rem 0;
     display: block;
     text-align: center;
   }
+
   .name {
     font-size: 4rem;
   }
+
   .bio {
     font-size: 1.75rem;
     margin: 0.75rem auto 3rem;
   }
+
   .illustration {
     position: absolute;
     bottom: -50px;
     right: 0;
     height: 700px;
     width: 600px;
   }
+
+  .picture {
+    border-radius: 250px;
+    display: hidden;
+    object-fit: cover;
+  }
 }
 
 /* iPad */
 @media screen and (max-width: 900px) {
   .foreground {
     margin: 2rem 0;
   }
+
   .name {
     font-size: 3rem;
     margin-bottom: 0.5rem;
   }
+
   .bio {
     font-size: 1.5rem;
   }
+
   .illustration {
     height: 550px;
     width: 420px;
@@ -185,6 +218,7 @@
   .container {
     display: flex;
   }
+
   .illustration {
     display: none;
   }
@@ -195,19 +229,24 @@
   .foreground {
     margin: 0;
   }
+
   .name {
     font-size: 2rem;
   }
+
   .bio {
     font-size: 1.25rem;
     margin-bottom: 2rem;
   }
+
   .button {
     font-size: 1rem;
   }
+
   .outlined {
     font-size: 1rem;
   }
+
   .illustration {
     position: absolute;
     bottom: 0;
@@ -218,16 +257,22 @@
   }
 }
 
-.picture_boader {
-  border: 10px solid rgba(64,102,97, 0.5);
-  border-radius: 250px;
-  object-fit: cover;
+.cardContainer {
+  margin: 1.5rem 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 0.7fr));
+  gap: 1.5rem;
+  bottom: 0;
 }
 
-.picture {
-  border-radius: 250px;
-  display: hidden;
-  object-fit: cover;
+@media only screen and (max-width: 1100px) {
+  .cardContainer {
+    display: none;
+  }
+
+  .right {
+    display: none;
+  }
 }
 
 .card {
@@ -244,20 +289,6 @@
   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
 }
 
-.cardContainer {
-  margin: 1.5rem 0;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 0.7fr));
-  gap: 1.5rem;
-  bottom: 0;
-}
-
-@media only screen and (max-width: 1080px) {
-    .cardContainer {
-        display: none;
-    }
-}
-
 .content {
   padding: 1rem;
   border-radius: 0 0 20px 20px;