fixed the home page mobile responsive issue

knative · May 11, 2024 · 680801c · 680801c
1 parent 187fe78
commit 680801c
Showing 1 changed file with 58 additions and 3 deletions.
diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css
@@ -352,7 +352,7 @@ h2.secondary-headline, h3.trusted-by {
   justify-content: center;
   color: black;
   display: flex;
-  background-color: white;
+  background-color: #f3f1f2;
 }
 
 .case-studies-container h1 {
@@ -466,7 +466,7 @@ h2.secondary-headline, h3.trusted-by {
 .cncf-notice-container h3 {
   font-weight: bold;
   color: var(--md-default-fg-color--light);
-  margin-top: 0;
+  margin-top: 1rem;
 }
 
 .md-typeset img.cncf-logo {
@@ -516,6 +516,61 @@ footer nav.md-footer__inner {
   padding: 0;
 }
 
-footer .md-footer-meta .md-footer-meta__inner {
+.md-footer-meta{
   padding: 1em 0;
+}
+.md-footer-copyright{
+  margin-right: 18px;
+}
+@media (max-width: 1024px){
+.md-footer-copyright{
+  margin: auto;
+  text-align: center;
+}
+.md-social{
+  margin: auto;
+}
+}
+@media (max-width: 861px) {
+  .md-footer-meta{
+    flex-direction: column;
+  }
+
+  .md-footer__link {
+    display: block;
+    margin-bottom: 1rem;
+  }
+
+  .md-footer__title {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+  .md-footer__button {
+    display: none;
+  }
+
+  .md-footer-meta__inner {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .md-footer-copyright {
+    order: 2;
+    margin: 2rem;
+    flex-wrap: wrap;
+  }
+  .md-footer-copyright a{
+    margin: 8px;
+  }
+
+  .footer-links {
+    display: flex;
+    flex-direction: column;
+    order: 1;
+
+  }
+
+  .md-social {
+    margin-top: 1rem;
+  }
 }