fixed responsive

leonacostaok · Nov 8, 2023 · 9d30c24 · 9d30c24
1 parent 4c4eafd
commit 9d30c24
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/example/components/Footer.tsx b/example/components/Footer.tsx
@@ -23,6 +23,10 @@ const FooterContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  @media only screen and (max-width: 575px){
+    position: relative;
+    bottom: unset;
+  }
 `
 
 const FooterWrapper = styled.div`

diff --git a/example/pages/index.tsx b/example/pages/index.tsx
@@ -74,19 +74,48 @@ const Tabs = styled.div`
 `;
 const TabsSelector = styled.div`
   display: flex;
+  width: 50%;
   flex-direction: row;
   align-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-bottom: none;
+  border-radius: 20px 20px 0 0;
   div:first-of-type {
     border-radius: 20px 0 0 0;
   }
   div:last-of-type {
     border-radius: 0 20px 0 0;
   }
+
+  @media only screen and (max-width: 1024px) {
+    flex-direction: column;
+    div:first-of-type {
+      border-radius: 20px 20px 0 0;
+    }
+    div:last-of-type {
+      border-radius: 0 0 0 0;
+    }
+  }
+  @media only screen and (max-width: 1024px) {
+    flex-direction: column;
+    div:first-of-type {
+      border-radius: 20px 20px 0 0;
+    }
+    div:last-of-type {
+      border-radius: 0 0 0 0;
+    }
+  }
+  @media only screen and (max-width: 575px){
+    width: 95%;
+  }
 `;
 const TabButton = styled.div<{ active: boolean }>`
   margin: 0;
   background-color: rgba(255, 255, 255, 0.11);
-  padding: 10px 40px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: center;
+  width: 100%;
   color: rgba(255, 255, 255, 0.55);
   cursor: pointer;
   transition: all 0.3s ease-in;
@@ -107,6 +136,10 @@ const TabButton = styled.div<{ active: boolean }>`
 `;
 const TabContent = styled.div`
   border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 20px;
+  border-radius: 0 0 20px 20px;
   width: 50%;
+
+  @media only screen and (max-width: 575px){
+    width: 95%;
+  }
 `;