From 4bc93461bd1c2ed407522d9c50b6855df2cc4de9 Mon Sep 17 00:00:00 2001
From: joe1110 <josedolar@yahoo.com>
Date: Thu, 16 Apr 2020 01:00:47 -0700
Subject: [PATCH] Added responsive design features

---
 index.html      |  5 ++---
 style/index.css | 57 ++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index aea9a776a..de3087bf3 100644
--- a/index.html
+++ b/index.html
@@ -51,8 +51,8 @@ <h2>Project 3</h2>
                     <img src="https://i.picsum.photos/id/1024/1920/1280.jpg">
                     <h2>Project 4</h2>
                </div>
-        </div>
-        <div class="project_row2"> <!--flex-->
+      <!--  </div> -->
+      <!--  <div class="project_row2"> flex-->
             <div class="project">                   
                 <img src="https://i.picsum.photos/id/1025/4951/3301.jpg">
                 <h2>Project 5</h2>
@@ -68,7 +68,6 @@ <h2>Project 7</h2>
             <div class="project">
                 <img src="https://i.picsum.photos/id/1041/5184/2916.jpg">
                 <h2>Project 8</h2>
-
             </div>
         </div>
         <footer class="footer">
diff --git a/style/index.css b/style/index.css
index bbff825bd..b4e81d412 100644
--- a/style/index.css
+++ b/style/index.css
@@ -19,7 +19,13 @@ font-size: 100%;
 font: inherit;  
 vertical-align: baseline;  
 }
-
+/*
+@media (max-width: 768px){
+html {
+    font-size: 62.5%;
+  }
+}
+*/
 .main_container{
     border-color: grey;
     border-width: 1px;
@@ -38,6 +44,8 @@ vertical-align: baseline;
     padding-left: 10px;
 }
 .nav{
+    display:flex;
+    flex-wrap: wrap;
     margin-top:15px;
     text-align: left; 
     padding-left: 10px;
@@ -53,11 +61,11 @@ a:hover{
     background-color: yellow;
     color: red;
 }
-
 .name_and_picture_container{
     margin-top: 10px;
     display:flex;    
     justify-content: space-between;
+    flex-wrap:wrap;
 }
 .picture{
     width:46.70%;
@@ -72,9 +80,7 @@ a:hover{
     padding-top: 50px;
     padding-left: 50px;
     border:5px;
-    /*width:40px;*/
     width:46.70%;
-   /* background-color:#CCCCCC;*/
     box-sizing: border-box;
 }
 .name > h1, .footer > h1{
@@ -84,6 +90,17 @@ a:hover{
 .name >p{
     text-align: justify;
 }
+
+@media (max-width: 800px){
+    .picture{
+        width:100%;
+    } 
+    .name{
+        width:100%;
+        padding-left:0;
+    }   
+}
+
 .name > a, .footer >a {
     border-width: 1px;
     border-style: solid;
@@ -97,17 +114,41 @@ a:hover{
 .name >p{
     margin-top:10px;
 }
-.project_row1, .project_row2{
+.project_row1{
     display:flex;
-    justify-content: space-between;
+    justify-content: space-between;    
+    flex-wrap: wrap;
     margin-top: 60px; 
     margin-bottom: 60px; 
-
 }
 .project{
-    width:20%;
+    width:21%;
     height:200px;
     text-align: center;
+    padding-top: 25px;
+    padding-bottom:25px;
+}
+@media (max-width: 800px){
+    .project{
+        width:45%;
+        height:200px;
+        text-align: center;
+    }
+}
+@media (max-width: 500px){
+    .project{
+        width:80%;
+        height:200px;
+        text-align: center;        
+    }
+}
+
+@media (max-width: 375px){
+    .project{
+        width:75%;
+        height:200px;
+        text-align: center;
+    }
 }
 .project > img{
     width:100%;