Feature/cross browser compatibility

src/css/custom.css

@@ -178,14 +178,13 @@ h1.docTitle_node_modules-\@docusaurus-theme-classic-src-theme-DocItem- {
 
 @media (min-width: 997px) {
   .menu_SIkG {
-      flex-grow: 1;
-      padding: 1rem !important;
+    flex-grow: 1;
+    padding: 1rem !important;
   }
 }
 
 /* New */
 
-
 .markdown > h2 {
   --ifm-h2-font-size: 1.875rem;
   margin-bottom: 0.8rem;
@@ -534,7 +533,7 @@ a:hover {
   display: flex;
   align-items: center;
   flex-direction: column;
-  margin: 0 3rem;
+  margin: auto;
   gap: 2rem;
 }
 
@@ -563,7 +562,7 @@ a:hover {
   display: flex;
   gap: calc(2rem + 2px);
   padding: 1.5rem 0;
-  margin: 0 10rem;
+  margin: auto;
 }
 
 .card__wide ul {
@@ -628,11 +627,13 @@ a:hover {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
-  justify-content: center;
+  justify-content: space-between;
+  width: 100%;
 }
 
 .organization-feature-card {
   max-width: 320px;
+  gap: auto;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -734,9 +735,9 @@ a:hover {
 .app-feature-card {
   display: flex;
   flex-direction: row;
-  padding: 4rem;
+  /* padding: 4rem;
   gap: 5rem;
-  height: 60vh;
+  height: 60vh; */
 }
 .app-feature-card__image {
   flex: 1;
@@ -758,7 +759,6 @@ a:hover {
   align-items: center;
 }
 
-
 @media only screen and (max-width: 1199px) {
   .app-feature-card {
     flex-direction: column;
@@ -790,7 +790,8 @@ a:hover {
 /* Section - 6 */
 
 .SixthPanel .TwoColumns {
-  grid-template-columns: 2fr 3fr;
+  grid-template-columns: 4fr 7fr;
+  align-items: center;
 }
 
 .SixthPanel .left div {
@@ -961,6 +962,10 @@ a:hover {
     padding-left: 0 !important;
   }
 
+  .SixthPanel .column.right .prism-code{
+    margin-right: 0px !important;
+  }
+
   /* Section 7 - Participation-feature-card */
   .participation-feature-card__image img {
     width: 50vw;
@@ -991,14 +996,19 @@ a:hover {
     height: 50vh;
     overflow: hidden;
   }
+
+  .app-feature-card__image {
+    justify-content: end;
+  }
 }
 
 /* Styles for screens larger than 1440px */
 
 @media (min-width: 1920px) {
   .card__description,
   .SixthPanel .left div,
-  .EightPanel p, .card__wide li {
+  .EightPanel p,
+  .card__wide li {
     font-size: 1rem;
   }
   .card__wide li {
@@ -1019,4 +1029,22 @@ a:hover {
   .SixthPanel {
     align-items: center;
   }
+
+  /* Section - 2  */
+
+  .organization-feature-cards {
+    height: 30vh;
+  }
+}
+
+@media only screen and (min-width: 961px) {
+  .TwoColumns,
+  .card__container,
+  .card__wide {
+    width: 70vw;
+    max-width: 1280px !important;
+  }
+  .EightPanel .column {
+    padding-right: 0 !important;
+  }
 }

src/css/index.css

@@ -240,6 +240,9 @@
 .NativeDevelopment {
   overflow-y: hidden;
 }
+.NativeDevelopment .left {
+  margin: auto;
+}
 
 .NativeDevelopment .dissection {
   position: relative;
@@ -273,7 +276,7 @@
 
 @media only screen and (min-width: 961px) {
   .NativeDevelopment .dissection {
-    height: 300px;
+    height: auto;
   }
 }
 
@@ -313,9 +316,9 @@
 
 /* Correct for whitespace in the image of phones */
 .SixthPanel .column.left {
-  margin-top: -25px;
+  /* margin-top: -25px;
   padding-top: 30px;
-  left: 300px;
+  left: 300px; */
 }
 
 /* Correction for the bottom space in section six*/
@@ -346,7 +349,7 @@
   border-radius: 0;
   font-size: 80%;
   height: 450px;
-  width: fit-content;
+  width: 100%;
 }
 
 @media only screen and (max-width: 480px) {
@@ -387,14 +390,14 @@
 @media only screen and (min-width: 961px) {
   .SixthPanel .TwoColumns .column.right {
     /* Make flush with top and bottom */
-    margin-top: -50px;
+    /* margin-top: -50px; */
     /* Get rid of default left padding */
-    padding-left: 6rem;
+    /* padding-left: 6rem; */
+    max-width: 100%;
+    padding-left: 0;
   }
 
   .SixthPanel .TwoColumns {
-    margin-left: 8rem;
-    margin-right: 8rem;
     justify-content: space-between;
   }
 
@@ -624,9 +627,7 @@
 
 @media only screen and (min-width: 961px) {
   .TwoColumns {
-    width: 80vw;
     margin: 0 auto;
-    max-width: 900px;
     grid-template-columns: repeat(2, 1fr);
     grid-template-areas: "first last";
   }