feat(ui): adjust block list page instance for mobile

nervosnetwork · May 28, 2019 · 268d354 · 268d354
1 parent 80e6ec1
commit 268d354
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/web/src/pages/BlockList/styled.tsx b/web/src/pages/BlockList/styled.tsx
@@ -4,6 +4,10 @@ export const BlockListPanel = styled.div`
   width: 100%;
   margin-top: ${(props: { width: number }) => (100 * props.width) / 1920}px;
   margin-bottom: ${(props: { width: number }) => (150 * props.width) / 1920}px;
+
+  @media (max-width: 700px) {
+    margin 20px 0px;
+  }
 `
 
 export const ContentTitle = styled.div`
@@ -12,18 +16,29 @@ export const ContentTitle = styled.div`
   margin: 0 auto;
   text-align: center;
 
+  @media (max-width: 700px) {
+    font-size: 30px;
+  }
+
   &:after {
     content: '';
     background: #3cc68a;
     height: 4px;
     width: 197px;
     display: block;
     margin: 0 auto;
+
+    @media (max-width: 700px) {
+      width: 90px;
+    }
   }
 `
 
 export const ContentTable = styled.div`
   margin-top: 58px;
+  @media (max-width: 700px) {
+    margin-top: 30px;
+  }
   overflow-x: auto;
 `
 export const CommonPagition = styled.div`
@@ -57,6 +72,9 @@ export const CommonPagition = styled.div`
 
 export const BlocksPagition = styled(CommonPagition)`
   margin-top: 60px;
+  @media (max-width: 700px) {
+    margin-top: 15px;
+  }
   width: 100%;
   overflow-x: auto;
 `