fix mobile overflow issue (#468)

6 years ago · b7c8466711
parent 22f2ea673e
commit b7c8466711
6 changed files with 3 additions and 12 deletions
--- 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: 1024px;
              max-width: 92vw;
              padding: ${config.paddingVertical} ${config.paddingHorizontal};
            }
--- 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>
--- 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."
--- 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>
--- 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;
      }
--- 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,