fix styles on mobile for container (#2364)

KlimaDAO · Jun 10, 2024 · ffcfbb6 · ffcfbb6
1 parent 222155c
commit ffcfbb6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/base/components/pages/Home/styles.ts b/base/components/pages/Home/styles.ts
@@ -1,4 +1,5 @@
 import { css } from "@emotion/css";
+import breakpoints from "@klimadao/lib/theme/breakpoints";
 
 export const container = css`
   position: relative;
@@ -46,12 +47,15 @@ export const ctaCard = css`
   border-radius: 1.2rem;
   grid-column: 1 / 3;
   padding-top: 2.4rem;
-  max-width: 50%;
   margin: 1rem auto;
   .hr {
     height: 0.2rem;
     background-color: #202020;
   }
+
+  ${breakpoints.desktop} {
+    max-width: 50%;
+  }
 `;
 
 export const ctaCard_header = css`
@@ -106,13 +110,17 @@ export const stakeCard_ui = css`
   display: grid;
   gap: 4.8rem;
   padding: 3.2rem;
-  width: 48rem;
-  max-width: 48rem;
+  width: 100%;
   justify-self: center;
   align-items: center;
   border: 2px solid #303030;
   padding: 2.4rem;
   border-radius: 1.2rem;
+
+  ${breakpoints.medium} {
+    width: 48rem;
+    max-width: 48rem;
+  }
 `;
 
 export const inputsContainer = css`

diff --git a/base/styles/globals.css b/base/styles/globals.css
@@ -1,5 +1,6 @@
 :root {
   --max-width: 1100px;
+  --background-rgb: 42, 42, 42;
 }
 
 @media (prefers-color-scheme: dark) {