improved responsiveness

BoostIO · May 6, 2020 · 3c6f350 · 3c6f350
1 parent 6656024
commit 3c6f350
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/components/pages/NotePage.tsx b/src/components/pages/NotePage.tsx
@@ -27,18 +27,19 @@ import { dispatchNoteDetailFocusTitleInputEvent } from '../../lib/events'
 
 export const StyledNoteDetailNoNote = styled.div`
   text-align: center;
-  margin-top: 11%;
+  margin-top: 13%;
   color: #a9a9a9;
 
   img {
     max-width: 100%;
+    width: 40%;
     height: auto;
   }
 
   section {
     margin: auto;
     display: flex;
-    width: 50%;
+    width: 70%;
     text-align: center;
 
     div {
@@ -70,6 +71,14 @@ export const StyledNoteDetailNoNote = styled.div`
     margin: 0;
     font-weight: normal;
   }
+
+  // Media Query
+  @media only screen and (max-width: 970px) {
+    section {
+      width: 100%;
+      display: block;
+    }
+  }
 `
 
 export type BreadCrumbs = {