[AV-77311] Updating CSS to address screen size inconsistencies

Author: sarahlwelton

src/css/landing-page.css

@@ -331,6 +331,10 @@
   font-weight: var(--weight-semibold);
 }
 
+.doc.landing-page-capella .tabpanel > .tabs-image {
+  width: 500px;
+}
+
 /* CSS for How Do You Want To Start Building Today? section */
 .doc.landing-page-capella .centered > h2 {
   text-align: center;
@@ -393,6 +397,110 @@
   z-index: 1;
 }
 
+/* Screen size considerations */
+
+@media screen and (min-width: 340px) and (max-width: 430px) {
+  .doc.landing-page-capella .top-row > .positioned-image {
+    min-width: 130px;
+    margin-top: -37.5rem; /* Adjust to position image right below the div */
+  }
+
+  .doc.landing-page-capella .tabs {
+    margin: 2rem 0;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .tabpanel {
+    display: block;
+  }
+
+  .doc.landing-page-capella .tabpanel > .text-tabs-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .tabpanel > .tabs-image {
+    width: 250px;
+  }
+
+  .doc.landing-page-capella .card-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .card-box {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 500px) and (max-width: 700px) {
+  .doc.landing-page-capella .top-row > .positioned-image {
+    min-width: 130px;
+    margin-top: -29rem; /* Adjust to position image right below the div */
+  }
+
+  .doc.landing-page-capella .tabs {
+    margin: 2rem 0;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .tabpanel {
+    display: block;
+  }
+
+  .doc.landing-page-capella .tabpanel > .text-tabs-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .tabpanel > .tabs-image {
+    width: 275px;
+  }
+
+  .doc.landing-page-capella .card-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .card-box {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1280px) {
+  .doc.landing-page-capella .top-row > .positioned-image {
+    min-width: 150px;
+    margin-top: -15rem; /* Adjust to position image right below the div */
+  }
+
+  .doc.landing-page-capella .tabs {
+    margin: 2rem 0;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .tabpanel {
+    display: block;
+    padding: 2em 1.25em;
+  }
+
+  .doc.landing-page-capella .tabpanel > .text-tabs-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .tabpanel > .tabs-image {
+    width: 50%;
+  }
+
+  .doc.landing-page-capella .card-container {
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .card-box {
+    width: 46%;
+  }
+}
+
 /* CSS for nav filter */
 .nav.tutorials-filter .nav-menu {
   padding: 20px;