fix mobile overflow issue (#468)

carbon-app · Aug 12, 2018 · b7c8466 · b7c8466
1 parent 22f2ea6
commit b7c8466
Show file tree

Hide file tree

Showing 6 changed files with 3 additions and 12 deletions.
diff --git a/components/Carbon.js b/components/Carbon.js
@@ -113,8 +113,7 @@ class Carbon extends PureComponent {
             #container {
               position: relative;
               min-width: ${config.widthAdjustment ? '90px' : '680px'};
-              max-width: 1024px; /* The Fallback */
-              max-width: 92vw;
+              max-width: 1024px;
               padding: ${config.paddingVertical} ${config.paddingHorizontal};
             }
 

diff --git a/components/Header.js b/components/Header.js
@@ -32,13 +32,6 @@ const Header = ({ enableHeroText }) => (
 
         h2 {
           text-align: center;
-          max-width: 80vw;
-        }
-
-        @media only screen and (max-width: 756px)  {
-          h2 {
-            font-size: 2.8vw;
-          }
         }
       `}
     </style>

diff --git a/components/Meta.js b/components/Meta.js
@@ -18,7 +18,6 @@ export default () => {
       <Head>
         <meta charSet="utf-8" />
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta
           name="description"
           content="Carbon is the easiest way to create and share beautiful images of your source code."

diff --git a/components/Page.js b/components/Page.js
@@ -18,6 +18,7 @@ export default ({ children, enableHeroText }) => (
           justify-content: center;
           flex-direction: column;
           align-items: center;
+          min-width: 1080px; // temporary fix for mobile overflow issue
         }
       `}
     </style>

diff --git a/components/style/Reset.js b/components/style/Reset.js
@@ -145,7 +145,6 @@ export default () => (
         font-style: normal;
         text-transform: initial;
         letter-spacing: initial;
-        overflow-y: auto;
         /* min-width: 848px; */
         min-height: 704px;
       }

diff --git a/components/style/Typography.js b/components/style/Typography.js
@@ -31,7 +31,7 @@ export default () => (
       body {
         font-size: var(--h4);
         line-height: var(--lh);
-        margin: 2rem 0;
+        margin: 6rem 0;
       }
 
       h1,