fixMobileMargin (#1090)

* fix mobile margin * fix margin on staking page
quicksilver-zone · Jan 24, 2024 · 97e8547 · 97e8547
1 parent 22c7158
commit 97e8547
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/web-ui/pages/defi.tsx b/web-ui/pages/defi.tsx
@@ -12,7 +12,7 @@ export default function Home() {
         <link rel="icon" href="/img/favicon.png" />
       </Head>
       <SlideFade offsetY={'200px'} in={true} style={{ width: '100%' }}>
-        <Flex height="100vh" mt={{ base: '-60px' }} alignItems="center" justifyContent="center">
+        <Flex height="100vh" mt={{ base: '-20px' }} alignItems="center" justifyContent="center">
           <Container
             p={4}
             m={0}

diff --git a/web-ui/pages/governance.tsx b/web-ui/pages/governance.tsx
@@ -23,7 +23,7 @@ export default function Home() {
           flexDirection="column"
           justifyContent="center" // Center vertically
           alignItems="center" // Center horizontally
-          mt={{ base: '-40px', md: '60px' }} // Ensuring the margin-top is zero
+          mt={{ base: '40px', md: '60px' }} // Ensuring the margin-top is zero
           mb="0" // Ensuring the margin-bottom is zero
         >
           <Head>

diff --git a/web-ui/pages/staking/index.tsx b/web-ui/pages/staking/index.tsx
@@ -65,7 +65,7 @@ export default function Staking() {
       <SlideFade offsetY={'200px'} in={true} style={{ width: '100%' }}>
         <Container
           zIndex={2}
-          mt={{ base: '-30px', md: '50px' }}
+          mt={{ base: '10px', md: '50px' }}
           position="relative"
           maxW="container.lg"
           height="100vh"
@@ -124,8 +124,18 @@ export default function Staking() {
                 <DynamicAssetBox selectedOption={selectedNetwork} balance={balance} qBalance={qBalance} />
               </Flex>
             </Flex>
-            <Box display={{ base: 'none', lg: 'block', md: 'none' }} position="relative" left="885px" bottom="205px" zIndex={10}>
-              <Image src="/img/quicksilverWord.png" alt="Quicksilver" h="100px" transform="rotate(90deg)" />
+            <Box>
+              <Image
+                display={{ base: 'none', lg: 'block', md: 'none' }}
+                position="relative"
+                left="885px"
+                bottom="205px"
+                zIndex={10}
+                src="/img/quicksilverWord.png"
+                alt="Quicksilver"
+                h="100px"
+                transform="rotate(90deg)"
+              />
             </Box>
           </Flex>
         </Container>