Merge pull request #749 from Ishika-Singhal/main

Alignment and Text Visibility (issue #601)
PriyaGhosal · Oct 15, 2024 · 9fc35fc · 9fc35fc
2 parents 8ad9791 + ec5a6ed
commit 9fc35fc
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -945,7 +945,7 @@ <h2>Thank You!</h2>
     <h2 class="testimonials-heading" >Testimonials</h2>
 
     <div class="testimonials-container">
-      <div class="header1"> 
+      <div class="header1 test"> 
       <figure class="snip1533">
         <figcaption>
           <blockquote>
@@ -956,7 +956,7 @@ <h4>Traveller</h4>
         </figcaption>
       </figure>
       </div>
-      <div class="header2"> 
+      <div class="header2 test"> 
       <figure class="snip1533">
 
         <figcaption>
@@ -969,7 +969,7 @@ <h4>Traveller</h4>
         </figcaption>
       </figure>
     </div>
-    <div class="header1"> 
+    <div class="header1 test"> 
       <figure class="snip1533">
 
         <figcaption>

diff --git a/style.css b/style.css
@@ -603,7 +603,7 @@ body {
 .section-title {
   text-align: center;
   color: #1a365d;
-  font-size: 2.5rem;
+  font-size: 3rem;
   margin-bottom: 3rem;
   animation: fadeIn 1s ease-out;
 }
@@ -1340,7 +1340,9 @@ body.light-mode {
   font-style: italic;
   font-weight: 500;
 }
-
+.dark-mode .review-p{
+  color:whitesmoke
+}
 .reviews-section h2 {
   font-size: 3em;
   margin-bottom: 20px;
@@ -2117,6 +2119,10 @@ body.light-mode {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 2rem;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
 }
 
 /* Heading and Title */
@@ -2304,6 +2310,12 @@ body.light-mode {
   align-items: center;
   gap: 10px;
 }
+@media (max-width:900px){
+   .testimonials-container{
+    flex-direction: column;
+   }
+
+}
 
 .snip1533 {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
@@ -2377,6 +2389,14 @@ body.light-mode {
   font-weight: 300;
   margin: 0 0 20px;
 }
+@media (max-width:900px){
+  .snip1533{
+    max-width:90vw;
+  }
+  .snip1533 figcaption {
+    padding: 8% 8% 5%;
+}
+}
 .header1{
   animation-name: pulse1;
   animation-duration: 1.8s;
@@ -2448,7 +2468,14 @@ body.light-mode {
   display: flex;
   flex-direction: column;
 }
-
+@media (max-width:900px){
+  .review-form{
+    width:60vw;
+  }
+  .form{
+    width:50vw;
+  }
+}
 label {
   margin-bottom: 8px;
   font-size: 16px;