make home page risponsive

Yam2016 · Jun 22, 2021 · ba47628 · ba47628
1 parent 73dacbc
commit ba47628
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/index.css b/index.css
@@ -50,6 +50,7 @@ a {
   width: 100vw;
   height: 100vh;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-around;
   background: #ff87af;
@@ -116,10 +117,6 @@ a {
   flex-direction: column;
 }
 
-h1 {
-  padding-bottom: 2rem;
-}
-
 /* background-image: url("/images/Diana.jpg");
   background-repeat: no-repeat;
   background-size: 50vw;
@@ -128,10 +125,13 @@ h1 {
 
 #introduction {
   width: 40%;
+
   text-align: center;
 }
+
 #introduction h1 {
   color: #793eaa;
+  font-size: 5vmin;
 }
 
 #introduction a {
@@ -171,8 +171,8 @@ h1 {
   top: 80px;
 }
 
-.home-container img {
-  width: 60%;
+#diana {
+  max-width: 60%;
   object-fit: fill;
 }
 
@@ -211,7 +211,7 @@ h1 {
 }
 
 .social-icon {
-  width: 50px !important;
+  width: 7vmin !important;
 }
 
 .social-icon:hover {
@@ -222,3 +222,20 @@ h1 {
 .ProjectDate {
   text-align: right;
 }
+
+@media only screen and (max-width: 880px) {
+  #diana {
+    max-width: 100%;
+  }
+  #introduction {
+    width: 100%;
+    margin-top: 15%;
+  }
+  .links {
+    font-size: 3vmin;
+    padding-top: 15px;
+  }
+  .logo {
+    font-size: 15px;
+  }
+}
diff --git a/index.html b/index.html
@@ -54,7 +54,7 @@ <h5>Wish you good luck !</h5>
         </div>
       </div>
 
-      <img src="images/Diana-HomePage3.jpg" alt="" />
+      <img src="images/Diana-HomePage3.jpg" alt="" id="diana" />
     </div>
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,7 +54,7 @@ <h5>Wish you good luck !</h5> @@
             </div>
           </div>
-          <img src="images/Diana-HomePage3.jpg" alt="" />
+          <img src="images/Diana-HomePage3.jpg" alt="" id="diana" />
         </div>
       </body>
     </html>