a

aliciajwang · Jul 25, 2024 · c2ea8d3 · c2ea8d3
1 parent 171c7dc
commit c2ea8d3
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
     <div class="element">
       <!-- Navbar -->
         <nav id="navbar">
-          <div class="container">
+          <div>
             <h1><a href="#" style="color: #8E8B62;">My Personal Website</a></h1>
             <ul class="sidebar">
               <li onclick=hideSidebar()><a><i class='bx bx-x'></i></a></li>

diff --git a/style.css b/style.css
@@ -29,8 +29,9 @@ a{
 
 .container{
     margin:auto;
-    width: 80%;
+    max-width: 100%;
     justify-content: space-around;
+    overflow-x: hidden;
 }
 
 .clr{
@@ -41,6 +42,7 @@ a{
 
 html{
     scroll-behavior: smooth;
+    overflow-x: hidden;
 }
 
 ::-webkit-scrollbar {
@@ -71,6 +73,8 @@ html{
     top: 0;
     width: 100%;
     z-index:100;
+    padding-left: 9%;
+    padding-right: 9%;
 }
 
 #navbar h1{
@@ -248,16 +252,16 @@ html{
         content: "Web Developer";
     }
     21%, 40% {
-        content: "Full Stack Developer";
+        content: "Software Engineer";
     }
     41%, 60% {
-        content: "Software Engineer";
+        content: "Web Developer";
     }
     61%, 80% {
-        content: "Web Developer";
+        content: "Software Engineer";
     }
     81%, 100% {
-        content: "Full Stack Developer";
+        content: "Web Developer";
     }
 }
 
@@ -281,13 +285,13 @@ html{
 }
 
 .about-text{
-    width: 60vh;
+    width: 50vh;
     margin-top: 8%;
 }
 
 .main{
-    width: 1130px;
-    max-width: 95%;
+    max-width: 70%;
+    width: 1530px;
     display: flex;
 }
 
@@ -503,17 +507,47 @@ p{
 
 /* Sizing */
 
-@media only screen and (max-width: 900px){
+@media only screen and (max-width: 940px){
     .hideOnMobile{
         display: none;
     }
 
     .menu-button{
         display: block;
     }
+    .contain{
+        width: 90%;
+        padding: 30px 35px 40px 35px;
+    }
 }
 
-@media only screen and (max-width: 431px){
+@media only screen and (max-width: 1100px){
+
+    .contain{
+        margin: 40px 0;
+        height: 100%;
+    }
+
+    .contain .contact{
+        flex-direction: column-reverse;
+    }
+
+    .contain .contact .left-side{
+        width: 100%;
+        flex-direction: row;
+        margin-top: 40px;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .contact .left-side::before{
+        display: none;
+    }
+
+    .contain .contact .right-side{
+        width: 90%;
+        margin-left: 0;
+    }
 
     #about img{
         height: 38vh;