responsive

gdg-uberlandia · Feb 4, 2024 · 9f63b78 · 9f63b78
1 parent 8c131d9
commit 9f63b78
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 15 deletions.
diff --git a/src/components/iwd-2023/Testimonials/index.tsx b/src/components/iwd-2023/Testimonials/index.tsx
@@ -14,13 +14,13 @@ export const Testimonials = () => {
                             <Image 
                                 src="/iwd-2024/testimonials.png" 
                                 loading="lazy" 
-                                width={408} 
-                                height={350} 
+                                objectFit="contain"
+                                fill
                                 alt="Testimonials" 
                             />
                         </Col>
 
-                        <Col sm={12} lg={4} className={styles.Testimonial__topTestimonial}>
+                        <Col sm={12} md={4} className={styles.Testimonial__topTestimonial}>
                             <Card 
                                 author="Poliana Gomes"
                                 testimonial="Participar de um evento com várias mulheres líderes na área de tecnologia me fez sentir que tenho capacidade, vou progredir na minha carreira e todas nós juntas podemos inspirar mais mulheres a entrar na área de tecnologia, mostrando que podemos alcançar nossos objetivos." 
@@ -35,7 +35,7 @@ export const Testimonials = () => {
                         </Col>
                     </Row>
                 </Row>
-                <Row tag="section" noGutters className={styles.Testimonial__section}>
+                <Row tag="section" noGutters className={styles.Testimonial__content}>
                     <Col tag="article" sm={12} lg={4} className={styles.Testimonials__aside}>
                         <Card 
                             author="Aline Reis"

diff --git a/src/components/iwd-2023/Testimonials/styles.module.css b/src/components/iwd-2023/Testimonials/styles.module.css
@@ -11,12 +11,17 @@
 }
 
 .Testimonial__img {
-  margin-top: -1rem;
+  margin: 0 auto;
+  margin-top: 1rem;
+  max-height: 350px; 
+  min-height: 300px; 
+  max-width: 408px;
+  width: 80%;
+  position: relative;
 }
 
-.Testimonial__topTestimonial {
-  padding-top: 3.75rem;
-  padding-left: 2.5rem;
+.Testimonial__topTestimonial:nth-child(3) {
+  padding-top: 2rem;
 }
 
 .Testimonial__title {
@@ -28,19 +33,15 @@
   width: fit-content;
 }
 
-.Testimonial__section {
+.Testimonial__content {
+  margin-top: 2rem;
   gap: 2.5rem;
 }
 
 .Testimonials__aside {
   display: flex;
   flex-direction: column;
-  gap: 3.75rem;
-}
-
-.Testimonials__main {
-  padding-top: 3.75rem;
-  padding-right: 2.5rem;
+  gap: 2rem;
 }
 
 .TestimonialCard {
@@ -76,4 +77,27 @@
   .Testimonial__header {
     justify-content: space-between;
   }
+
+  .Testimonial__img {
+    margin-top: -1rem;
+    width: 100%;
+  }
+
+  .Testimonial__topTestimonial:nth-child(n) {
+    padding-top: 3.75rem;
+    padding-left: 2.5rem;
+  }
+
+  .Testimonial__content {
+    margin-top: 0;
+  }
+
+  .Testimonials__aside {
+    gap: 3.75rem;
+  }
+
+  .Testimonials__main {
+    padding-top: 3.75rem;
+    padding-right: 2.5rem;
+  }
 }