Resolved the Carousel Issue

Anjaliavv51 · Jan 8, 2025 · 2c42eed · 2c42eed
1 parent 5297b61
commit 2c42eed
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -40,9 +40,9 @@
                     </ul>
                 </li>
                 <li><a href="login.html">Login</a></li>
-            </ul>
+                
             <a href="#" class="btn-contact">Contact</a>
-
+           </ul>
         </nav>
     </header>
     <!-- Hero Section -->

diff --git a/styles.css b/styles.css
@@ -340,31 +340,35 @@ nav {
 /* Center carousel text */
 .carousel_caption {
     position: absolute;
-    right: 15%;
+    /* right: 15%;
     bottom: 40%;
-    left: 15%;
-    padding-top: 1.25rem;
-    padding-bottom: 1.25rem;
+    left: 15%; */
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding-top: 1rem;
+    padding-bottom: 1rem;
     color: #fff;
     text-align: center;
     background: rgba(0, 0, 0, 0.5); /*Semi-transparent background for better readability */
     border-radius: 10px;
-
 }
 
 /* Style for the heading text */
 .carousel_caption h1 {
-    font-size: 70px;
+    font-size: 4rem;
     font-weight: bold;
     color: white;
     margin-top: 0;
+    word-wrap: break-word;
 }
 
 /* Subtitle styling */
 .carousel_caption h2 {
-    font-size: 25px;
+    font-size: 1.5rem;
     color: white;
     font-weight: bolder;
+    word-wrap: break-word;
 
 }
 
@@ -385,13 +389,17 @@ nav {
     border-radius: #E5A186;
     color: white;
 }
+
+@media (max-width: 992px) and (min-width: 768px) {
+    .carousel_caption {
+        top: 70%; /* Push it lower to avoid navbar overlap */
+    }
+}
+
 @media (max-width: 768px) {
     .carousel_caption {
-        right: 10%;
-        bottom: 20%;
-        left: 10%;
-        padding-top: 1rem;
-        padding-bottom: 1rem;
+       top: 60%;
+       padding: 5px;
     }
 
     .carousel_caption h1 {
@@ -414,23 +422,20 @@ nav {
 
 @media (max-width: 576px) {
     .carousel_caption {
-        right: 5%;
-        bottom: 10%;
-        left: 5%;
-        padding-top: 0.75rem;
-        padding-bottom: 0.75rem;
+        top: 60%;
+        padding: 5px;
     }
 
     .carousel_caption h1 {
-        font-size: 1.5rem; /* Smaller text for smaller screens */
+        font-size: 1rem; /* Smaller text for smaller screens */
     }
 
     .carousel_caption h2 {
-        font-size: 0.875rem;
+        font-size: 0.7rem;
     }
 
     .carousel_caption p.subtitle {
-        font-size: 0.75rem;
+        font-size: 0.5rem;
     }
 
     .carousel_caption .btn {