chore(website): Fix responsive styling on homepage

Signed-off-by: Ben Johnson <[email protected]>
amitsaha · Dec 1, 2019 · 73dc9d5 · 73dc9d5
1 parent 8ee3800
commit 73dc9d5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -988,6 +988,13 @@ ul.tabs.rounded li.tab-item.tab-item--active {
 .tabs--centered ul.tabs {
   display: inline-block;
 }
+
+@media (max-width: 996px) {
+  ul.tabs.rounded {
+    display: block !important;
+  }
+}
+
 /*
  * Docs
  */

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -318,7 +318,6 @@ function Topologies() {
         <Tabs
           centered={true}
           className="rounded"
-          style={{minWidth: "500px"}}
           defaultValue="centralized"
           values={[
             { label: <><i className="feather icon-shuffle"></i> Distributed</>, value: 'distributed', },

diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
@@ -249,6 +249,8 @@ html[data-theme="dark"] .hero {
   margin: var(--ifm-heading-margin-bottom) auto;
   max-height: 300px;
   max-width: 900px;
+  height: 100%;
+  width: 100%;
 }
 
 /*