📱 Make it responsive

varianter · Dec 12, 2024 · ace6522 · ace6522
1 parent b7cd5d4
commit ace6522
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 16 deletions.
diff --git a/src/components/sections/openness/Openness.tsx b/src/components/sections/openness/Openness.tsx
@@ -12,9 +12,9 @@ export interface OpennessProps {
 export default function Openness({ section }: OpennessProps) {
   return (
     <div className={styles.wrapper}>
-      <div className={styles.title}>
-        <Text type={"h2"}>{section.basicTitle}</Text>
-      </div>
+      <Text type={"h2"} className={styles.title}>
+        {section.basicTitle}
+      </Text>
       <div className={styles.content}>
         <div className={styles.image}>
           <SanityImage image={section.image} />

diff --git a/src/components/sections/openness/openness.module.css b/src/components/sections/openness/openness.module.css
@@ -10,17 +10,17 @@
   color: var(--text-primary);
 }
 
-.image {
-  height: 30rem;
-
-  & img {
-    border-radius: 0.375rem 6rem 0.375rem 0.375rem;
-  }
-}
-
 .title {
   width: 40rem;
   color: var(--text-primary);
+
+  @media (max-width: 834px) {
+    width: 25.875rem;
+  }
+
+  @media (max-width: 425px) {
+    width: 19.4375rem;
+  }
 }
 
 .content {
@@ -29,4 +29,28 @@
   align-items: flex-start;
   padding: 0.25rem;
   gap: 1rem;
+
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem;
+  }
+}
+
+.image {
+  height: 30rem;
+
+  & img {
+    border-radius: 0.375rem 6rem 0.375rem 0.375rem;
+  }
+
+  @media (max-width: 834px) {
+    height: 26.25rem;
+    align-self: stretch;
+  }
+
+  @media (max-width: 425px) {
+    align-self: stretch;
+    height: 22.375;
+  }
 }
diff --git a/src/components/smileyBox/SmileyBox.tsx b/src/components/smileyBox/SmileyBox.tsx
@@ -9,11 +9,11 @@ type SmileyBoxProps = {
 
 export default function SmileyBox({ description }: SmileyBoxProps) {
   return (
-    description && (
-      <div className={styles.wrapper}>
-        <div className={styles.smiley} />
+    <div className={styles.wrapper}>
+      <div className={styles.smiley} />
+      <div className={styles.description}>
         <Text type={"h3"}>{description}</Text>
       </div>
-    )
+    </div>
   );
 }
diff --git a/src/components/smileyBox/smileyBox.module.css b/src/components/smileyBox/smileyBox.module.css
@@ -4,10 +4,21 @@
   justify-content: space-between;
   align-items: flex-start;
   height: 30rem;
-  min-width: var(19.75rem);
+  min-width: 19.75rem;
   padding: 2.25rem;
   border-radius: 6rem 6rem 0.375rem 0.375rem;
   background-color: #dafbdc;
+
+  @media (max-width: 834px) {
+    align-self: stretch;
+    height: 26.25rem;
+  }
+
+  @media (max-width: 425px) {
+    align-self: stretch;
+    height: 26.25rem;
+    min-width: 19.4375rem;
+  }
 }
 
 .smiley {
@@ -23,3 +34,15 @@
     background-color: var(--text-primary);
   }
 }
+
+.description {
+  align-self: stretch;
+
+  @media (max-width: 834px) {
+    max-width: 27.1875rem;
+  }
+
+  @media (max-width: 425px) {
+    max-width: 19.4375rem;
+  }
+}