From b7c8466711d8c9f5c786b133666d4c44c5bff15a Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sun, 12 Aug 2018 12:29:30 -0500 Subject: [PATCH] fix mobile overflow issue (#468) --- components/Carbon.js | 3 +-- components/Header.js | 7 ------- components/Meta.js | 1 - components/Page.js | 1 + components/style/Reset.js | 1 - components/style/Typography.js | 2 +- 6 files changed, 3 insertions(+), 12 deletions(-) diff --git a/components/Carbon.js b/components/Carbon.js index a96e3fc..3e283da 100644 --- 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 index 8b07274..5bd713d 100644 --- 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; - } } `} diff --git a/components/Meta.js b/components/Meta.js index 21d7ab5..ee01293 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -18,7 +18,6 @@ export default () => { - ( justify-content: center; flex-direction: column; align-items: center; + min-width: 1080px; // temporary fix for mobile overflow issue } `} diff --git a/components/style/Reset.js b/components/style/Reset.js index 6152ca7..8c76dc3 100644 --- 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 index 9192bde..a7e1eb4 100644 --- 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,