UI chnage mobile view and desktop view apllyign css

static/css/summary.css

@@ -1,4 +1,4 @@
-/* ================= FORM ELEMENTS ================= */
+/* ================= GLOBAL FORM ELEMENTS ================= */
 form label {
   display: block;
   margin-top: 10px;
@@ -8,6 +8,8 @@ form label {
 
 select {
   width: 100%;
+  max-width: 300px;
+  /* restrict width on desktop/laptop */
   padding: 10px 12px;
   border: 1px solid #ccc;
   border-radius: 6px;
@@ -42,21 +44,31 @@ button:hover {
   background-color: #0069d9;
 }
 
-
+/* ================= MAIN CONTAINER ================= */
 .main {
-    margin-left: 20px;
-    padding: 8px;
-    width: calc(100% - 50px);
-    margin-top: 50px;
-    position: relative;
-    z-index: 5;
-    transition: 0.3s;
+  margin-left: 260px;
+  /* sidebar width if exists */
+  padding: 70px 30px 40px 30px;
+  /* top padding for navbar */
+  margin-top: 50px;
+  /* extra top spacing */
+  width: auto;
+  transition: 0.3s;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  background: #ffffff;
+  padding: 35px 40px;
+  border-radius: 12px;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
 }
 
 /* ================= BACK BUTTON ================= */
 .back-btn {
   display: inline-block;
-  margin-bottom: 20px;
+  margin-top: 20px;
   padding: 10px 18px;
   background-color: #007bff;
   color: white;
@@ -70,3 +82,72 @@ button:hover {
 .back-btn:hover {
   background-color: #006ae6;
 }
+
+/* ================= MESSAGES ================= */
+.message {
+  margin-top: 15px;
+  color: #555;
+  font-size: 14px;
+}
+
+/* ================= RESPONSIVE ================= */
+
+/* Tablets (<= 992px) */
+@media (max-width: 992px) {
+  .main {
+    margin-left: 0;
+    /* remove sidebar spacing */
+    padding: 50px 20px 20px 20px;
+  }
+
+  .container {
+    padding: 25px 20px;
+  }
+
+  select {
+    max-width: 100%;
+    /* full width */
+  }
+
+  button {
+    width: 100%;
+    /* full width */
+    padding: 12px 0;
+  }
+}
+
+/* Mobile (<= 576px) */
+@media (max-width: 576px) {
+  .main {
+    padding: 40px 15px 15px 15px;
+  }
+
+  .container {
+    padding: 20px;
+  }
+
+  h2 {
+    font-size: 22px;
+    text-align: center;
+  }
+
+  select {
+    font-size: 14px;
+    padding: 10px;
+  }
+
+  button {
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .back-btn {
+    width: 100%;
+    text-align: center;
+    padding: 12px 0;
+  }
+
+  .message {
+    font-size: 13px;
+  }
+}