fix: align the components in the page based on the browser width

src/components/AboutUsCard/styles.module.css

@@ -23,15 +23,16 @@
 }
 
 .container {
-  width: 60vw;
+  width: auto;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  gap: 0rem;
+  gap: 4rem;
+  margin: auto;
 }
 
 .img_container {
-  width: 100%;
+  width: auto;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -44,7 +45,7 @@
 }
 
 .information_container {
-  width: 100%;
+  width: 25%;
   height: 80%;
   display: flex;
   flex-direction: column;
@@ -143,3 +144,17 @@
     margin-bottom: 20px;
   }
 }
+
+@media screen and (min-width: 2200px) {
+  .about_us {
+    width: 60vw;
+    margin: auto;
+  }
+}
+
+@media screen and (min-width: 3200px) {
+  .about_us {
+    width: 40vw;
+    margin: auto;
+  }
+}

src/components/AboutUsHeader/styles.module.css

@@ -98,3 +98,17 @@
     height: fit-content;
   }
 }
+
+@media screen and (min-width: 2200px) {
+  .about_header {
+    margin: auto;
+    width: 70vw;
+  }
+}
+
+@media screen and (min-width: 3200px) {
+  .about_header {
+    margin: auto;
+    width: 60vw;
+  }
+}

src/components/CommunityComponent/styles.module.css

@@ -8,6 +8,20 @@
   background: #1E1E1E;
 }
 
+@media screen and (min-width: 2200px) {
+  .conmmunity_info {
+    width: 70vw;
+    margin: auto;
+  }
+}
+
+@media screen and (min-width: 3200px) {
+  .conmmunity_info {
+    width: 60vw;
+    margin: auto;
+  }
+}
+
 .text_card_container {
   margin-left: 210px;
   width: 400px;

src/components/DeepdiveHeader/styles.module.css

@@ -104,3 +104,17 @@
     height: fit-content;
   }
 }
+
+@media screen and (min-width: 2200px) {
+  .deepdive_header {
+    margin: auto;
+    width: 70vw;
+  }
+}
+
+@media screen and (min-width: 3200px) {
+  .deepdive_header {
+    margin: auto;
+    width: 60vw;
+  }
+}

src/components/HomePageHeader/styles.module.css

@@ -85,3 +85,20 @@
     line-height: 16px;
   }
 }
+
+@media screen and (min-width: 2200px) {
+  .heroBanner {
+    width: 70vw;
+    margin: auto;
+    display: flex;
+  }
+}
+
+
+@media screen and (min-width: 3200px) {
+  .heroBanner {
+    width: 60vw;
+    margin: auto;
+    display: flex;
+  }
+}

src/components/KitsGallery/styles.module.css

@@ -84,3 +84,22 @@
     grid-template-columns: 1fr;
   }
 }
+
+@media screen and (min-width: 2200px) {
+  .gallery_container {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .container {
+    width: 70vw;
+  }
+}
+
+@media screen and (min-width: 3200px) {
+  .gallery_container {
+    width: 60vw;
+    grid-template-columns: repeat(7, 1fr);
+  }
+  .container {
+    width: 60vw;
+  }
+}

src/components/KitsGalleryMDX/styles.module.css

@@ -84,3 +84,22 @@
     grid-template-columns: 1fr;
   }
 }
+
+@media screen and (min-width: 2200px) {
+  .gallery_container {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .container {
+    width: 70vw;
+  }
+}
+
+@media screen and (min-width: 3200px) {
+  .gallery_container {
+    width: 60vw;
+    grid-template-columns: repeat(7, 1fr);
+  }
+  .container {
+    width: 60vw;
+  }
+}

src/components/KitsGalleryWithFilters/styles.module.css

@@ -109,3 +109,22 @@
     grid-template-columns: 1fr;
   }
 }
+
+@media screen and (min-width: 2200px) {
+  .gallery_container {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .container {
+    width: 70vw;
+  }
+}
+
+@media screen and (min-width: 3200px) {
+  .gallery_container {
+    width: 60vw;
+    grid-template-columns: repeat(7, 1fr);
+  }
+  .container {
+    width: 60vw;
+  }
+}

src/components/RoleBasedEnrtyComponent/styles.module.css

@@ -16,6 +16,20 @@
   padding: 10rem 0 0rem;
 }
 
+@media screen and (min-width: 2200px) {
+  .roles_based_entry {
+    width: 70vw;
+    margin: auto;
+  }
+}
+
+@media screen and (min-width: 3200px) {
+  .roles_based_entry {
+    width: 60vw;
+    margin: auto;
+  }
+}
+
 .card_container {
   width: 380px;
   height: 172px;

src/css/custom.css

@@ -308,3 +308,19 @@
   content: "head";
   background-color: var(--ifm-color-secondary-darkest);
 }
+
+/* Media Queries */
+@media screen and (min-width: 2200px) {
+  .navbar {
+    width: 70vw;
+    margin: auto;
+  }
+}
+
+
+@media screen and (min-width: 3200px) {
+  .navbar {
+    width: 60vw;
+    margin: auto;
+  }
+}

src/pages/Kits/index.js

@@ -45,7 +45,7 @@ export default function KitsPage() {
     >
       <DeepdiveHeader {...headerInput} />
       <main>
-        <RoleBasedEnrtyComponent showArrow={false} data={carouselKitdeepdive} />
+        <RoleBasedEnrtyComponent data={carouselKitdeepdive} />
         <AboutUsCard {...aboutInput} />
         <KitsGalleryWithFilters 
           itemsArray={kitsGallery}