Feature/cross browser compatibility (#934)

* standardize width and justification

* Update fourth panel css

* Update Eigth panel css

* Update Second panel css

* Update Sixth panel css

* Remove commented css from custom.css

* Remove commented styles from index.css

* Update CSS

* Update css to align Hero image

* Fix second section css for fixed height

* Fix fourth panel height to be fixed

src/css/custom.css

@@ -478,7 +478,6 @@ a:hover {
 .custom-image {
   width: 140%;
   padding: 10px;
-  right: -130px;
   opacity: 2;
 }
 
@@ -674,7 +673,6 @@ a:hover {
 /* Section 4 - native development */
 
 .fourth-panel > .card__wide {
-  height: 75vh;
   align-items: center;
 }
 
@@ -938,8 +936,7 @@ a:hover {
 
 @media only screen and (min-width: 1200px) {
   .custom-image {
-    max-width: 20vw;
-    margin-left: 5rem;
+    max-width: 100%;
   }
 
   /* Section 1 Hero */
@@ -952,6 +949,10 @@ a:hover {
   .app-feature-card__image {
     justify-content: end;
   }
+
+  .fourth-panel > .card__wide {
+    padding: 4rem;
+  }
 }
 
 /* Styles for screens larger than 1440px */
@@ -984,7 +985,7 @@ a:hover {
   /* Section - 2  */
 
   .organization-feature-cards {
-    height: 30vh;
+    height: 290px;
   }
 }
 

src/css/index.css

@@ -64,6 +64,10 @@
   max-width: initial;
 }
 
+.HeaderHero .TwoColumns .column.right {
+  text-align: end;
+}
+
 .HeaderHero .socialLinks {
   display: flex;
   justify-content: flex-end;
@@ -126,10 +130,6 @@
     padding-right: 0;
     width: fit-content;
   }
-
-  .HeaderHero .TwoColumns .column.right {
-    padding-left: 0;
-  }
 }
 
 @media only screen and (max-width: 760px) {