fix: responsive and alignment issue on career/internship page

Signed-off-by: upsaurav12 . <[email protected]>
upsaurav12 · Oct 19, 2024 · 922367c · 922367c
1 parent 4f5810f
commit 922367c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js b/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js
@@ -38,11 +38,16 @@ p{
     }
   }
   @media only screen and (max-width: 700px) {
-    .opportunity-col {
+    .col {
       flex: 0 0 100%;
     }
   }
 
+  @media only screen and (max-width: 450px) {
+    .opportunity-card { 
+      width: 100% !important; 
+    }
+  }
   .opportunity-card {
     width: 21rem;
     height: 15rem;

diff --git a/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js b/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js
@@ -79,4 +79,10 @@ export const ProgramsPageWrapper = styled.div`
             flex: 0 0 100%;
         }
     }
+
+    @media only screen and (max-width: 450px) {
+        .sub-section_program {
+            width: 15rem;
+        }
+    }
 `;