added responsiveness (#36)

Artlfmj · Oct 2, 2023 · a60dd5b · a60dd5b
2 parents bfc7301 + 01176a0
commit a60dd5b
Show file tree

Hide file tree

Showing 4 changed files with 256 additions and 173 deletions.
diff --git a/src/css/course.css b/src/css/course.css
@@ -7,35 +7,28 @@
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   background-color: #fff;
   padding: 20px;
-}
-
-.course-box {
   display: flex;
+  flex-wrap: wrap;
 }
 
 .course-image {
   flex-basis: 30%;
+  margin-bottom: 20px;
 }
 
 .course-image img {
   width: 200px;
   height: 150px;
   border-radius: 4px;
+  display: block;
+  margin: 0 auto;
 }
 
 .course-details {
   flex: 1;
   padding-left: 40px;
 }
 
-.course-box img {
-  width: 200px;
-  height: 150px;
-  display: block;
-  margin: 0 auto;
-  border-radius: 4px;
-}
-
 .course-box h1 {
   font-size: 24px;
   margin-top: 10px;
@@ -51,10 +44,52 @@
 
 .course-list-container {
   display: flex;
+  flex-wrap: wrap;
 }
 
 .course-container {
   max-width: 700px;
   margin: 0 auto;
   padding: 20px;
 }
+
+/* Mobile screens */
+@media only screen and (max-width: 600px) {
+  .course-box {
+    flex-direction: column;
+  }
+  .course-image {
+    flex-basis: 100%;
+  }
+  .course-details {
+    padding-left: 0;
+  }
+}
+
+/* Tablet screens */
+@media only screen and (min-width: 601px) and (max-width: 1024px) {
+  .course-box {
+    flex-direction: row;
+  }
+  .course-image {
+    flex-basis: 30%;
+  }
+  .course-details {
+    padding-left: 20px;
+  }
+}
+
+/* Laptop screens */
+@media only screen and (min-width: 1025px) {
+  .course-box {
+    flex-direction: row;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .course-image {
+    flex-basis: 30%;
+  }
+  .course-details {
+    padding-left: 50px;
+  }
+}
diff --git a/src/css/login.css b/src/css/login.css
@@ -15,6 +15,8 @@ body {
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     text-align: center;
+    width: 100%;  /* Ensures it takes the full width on mobile */
+    max-width: 400px;  /* Restricts its width on larger screens */
 }
 
 h1 {
@@ -38,6 +40,7 @@ input[type="password"] {
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 3px;
+    font-size: 14px; /* Adjust for better mobile readability */
 }
 
 button {
@@ -47,6 +50,7 @@ button {
     padding: 10px 20px;
     border-radius: 3px;
     cursor: pointer;
+    width: 100%; /* Full width on mobile for better touch targets */
 }
 
 button:hover {
@@ -56,3 +60,10 @@ button:hover {
 p {
     margin-top: 10px;
 }
+
+/* Media Query for Larger Devices */
+@media screen and (min-width: 768px) {
+    button {
+        width: auto; /* Resetting button width for larger screens */
+    }
+}
diff --git a/src/css/profile.css b/src/css/profile.css
@@ -1,91 +1,110 @@
 /* Reset some default styles */
 body {
-    margin: 0;
-    padding: 0;
-    font-family: Arial, sans-serif;
-  }
-
-  /* Header styles */
-  header {
-    background-color: #333;
-    color: white;
-    padding: 10px;
-    text-align: center;
-  }
-
-  /* Profile container */
-  .profile-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-  }
-
-  /* Profile section */
-  .profile-section {
-    background-color: #f9f9f9;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 20px;
-    margin-bottom: 20px;
-  }
-
-  /* Profile section title */
-  .profile-section h2 {
-    margin-top: 0;
-    font-size: 24px;
-  }
-
-  /* Profile form */
-  .profile-form {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  /* Profile form fields */
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+}
+
+/* Header styles */
+header {
+  background-color: #333;
+  color: white;
+  padding: 10px;
+  text-align: center;
+}
+
+/* Profile container */
+.profile-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* Profile section */
+.profile-section {
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+/* Profile section title */
+.profile-section h2 {
+  margin-top: 0;
+  font-size: 24px;
+}
+
+/* Profile form */
+.profile-form {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+/* Profile form fields */
+.profile-form .form-group {
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+/* Profile form labels */
+.profile-form label {
+  display: block;
+  font-weight: bold;
+}
+
+/* Profile form input fields */
+.profile-form input[type="text"],
+.profile-form input[type="email"] {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+/* Profile form submit button */
+.profile-form .submit-btn {
+  background-color: #333;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 10px 20px;
+  cursor: pointer;
+  width: 100%;
+}
+
+/* Profile form submit button on hover */
+.profile-form .submit-btn:hover {
+  background-color: #555;
+}
+
+/* Error message styles */
+.error-message {
+  color: red;
+  margin-top: 5px;
+}
+
+/* Success message styles */
+.success-message {
+  color: green;
+  margin-top: 5px;
+}
+
+/* Tablet screens */
+@media screen and (min-width: 601px) and (max-width: 1024px) {
   .profile-form .form-group {
-    width: 100%;
-    margin-bottom: 15px;
+      width: 50%;
+      padding: 0 10px;
   }
-
-  /* Profile form labels */
-  .profile-form label {
-    display: block;
-    font-weight: bold;
-  }
-
-  /* Profile form input fields */
-  .profile-form input[type="text"],
-  .profile-form input[type="email"] {
-    width: 100%;
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
+}
+
+/* Laptop screens */
+@media screen and (min-width: 1025px) {
+  .profile-form .form-group {
+      width: 33.33%;
+      padding: 0 10px;
   }
-
-  /* Profile form submit button */
   .profile-form .submit-btn {
-    background-color: #333;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    padding: 10px 20px;
-    cursor: pointer;
-  }
-
-  /* Profile form submit button on hover */
-  .profile-form .submit-btn:hover {
-    background-color: #555;
-  }
-
-  /* Error message styles */
-  .error-message {
-    color: red;
-    margin-top: 5px;
-  }
-
-  /* Success message styles */
-  .success-message {
-    color: green;
-    margin-top: 5px;
+      width: auto;
   }
-  
+}