mobile fix

wizbe97 · Nov 26, 2023 · 2a1ddac · 2a1ddac
1 parent 5fc1ae3
commit 2a1ddac
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 18 deletions.
diff --git a/css/about-section.css b/css/about-section.css
@@ -5,8 +5,6 @@
 
 #welcome {
     background-color: rgb(152, 51, 51);
-    margin-left: 10%;
-    margin-right: 10%;
     position: relative;
     padding-top: 3%;
     padding-left: 3%;
@@ -19,8 +17,6 @@
 
 #practice {
     background-color: rgb(173, 57, 57);
-    margin-left: 10%;
-    margin-right: 10%;
     position: relative;
     padding-top: 3%;
     padding-left: 3%;
@@ -33,8 +29,6 @@
 
 #location {
     background-color: rgb(152, 51, 51);
-    margin-left: 10%;
-    margin-right: 10%;
     position: relative;
     padding: 3%;
     display: flex;
@@ -45,8 +39,6 @@
 
 #contact-header {
     background-color: rgb(152, 51, 51);
-    margin-left: 10%;
-    margin-right: 10%;
     position: relative;
     padding-top: 1%;
     padding-left: 3%;
@@ -62,8 +54,6 @@
 
 #contact-div {
     background-color: rgb(152, 51, 51);
-    margin-left: 10%;
-    margin-right: 10%;
     position: relative;
     padding: 3%;
     display: flex;
@@ -83,8 +73,6 @@
     background-color: rgb(152, 51, 51);
     position: relative;
     justify-content: space-between; /* Adjust as needed */
-    margin-left: 10%;
-    margin-right: 10%;
     padding-bottom: 3%;
     padding-left: 4%;
     padding-right: 4%;

diff --git a/css/main.css b/css/main.css
@@ -1,6 +1,7 @@
 body {
     font-family: Arial, Helvetica, sans-serif;
-    margin: 0;
+    margin-left: 10%;
+    margin-right: 10%;
     padding: 0;
     background-image: url('../images/background-color.png');
 }
@@ -10,8 +11,6 @@ body {
     background-color: rgb(22, 22, 22);
     color: white;
     font-size: 10px;
-    margin-left: 10%;
-    margin-right: 10%;
     margin-bottom: 0.1%;
     position: relative;
     padding-top: 2%;
@@ -22,4 +21,16 @@ body {
     flex-direction: column;
     align-items: left;
     justify-content: center;
+}
+
+@media only screen and (max-width: 600px) {
+    body {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    header {
+        margin-left: 0;
+        margin-right: 0;
+    }
 }
diff --git a/css/nav-bar.css b/css/nav-bar.css
@@ -1,7 +1,6 @@
 /* Header styles */
 header {
     text-align: center; /* Center the content within the header */
-    max-width: 80%; /* Set the desired width for the header */
     margin: 0 auto; /* Center the header in the page */
     overflow: hidden;
     background-image: url('../images/background-color.png');
@@ -11,15 +10,14 @@ header {
 }
 
 header img {
-    width: 100%;
     height: auto;
     display: block;
+    width: 100%;
 }
 
 /* Navigation styles */
 nav {
     margin: 0 auto; /* Center the navbar in the page */
-    width: 80%; /* Set the desired width for the navbar */
     background-color: #1b1919;
     overflow: hidden;
     z-index: 1000;