Fixed a horizontal scrollbar appearing on certain website pages

The use of `100vw` was causing horizontal scrollbars to appear on the home and 404 pages. Using 100% fixes that. Technically, block elements like <div> don't need a width key since they automatically expand to take up as much width as possible, but I kept the value at 100% here to matter match the original intent of the code.
keystonejs · Jun 2, 2019 · 0c63832 · 0c63832
1 parent cf809dd
commit 0c63832
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/website/src/pages/404.js b/website/src/pages/404.js
@@ -56,7 +56,7 @@ const styles = {
 		color: 'white',
 		padding: '2rem 0 4em',
 		position: 'relative',
-		width: '100vw',
+		width: '100%',
 		height: '100vh',
 		overflow: 'hidden'
 	},

diff --git a/website/src/pages/components/home/AdminInterface.js b/website/src/pages/components/home/AdminInterface.js
@@ -26,7 +26,7 @@ const styles = {
 		backgroundColor: theme.color.lightBlue,
 		textAlign: 'center',
 		padding: '4rem 0',
-		width: '100vw',
+		width: '100%',
 		overflow: 'hidden',
 	},
 	heading: {

diff --git a/website/src/pages/components/home/Hero.js b/website/src/pages/components/home/Hero.js
@@ -92,7 +92,7 @@ const styles = {
 		color: 'white',
 		padding: '2rem 0 4em',
 		position: 'relative',
-		width: '100vw',
+		width: '100%',
 		overflow: 'hidden',
 	},
 	content: {