diff --git a/README.md b/README.md
index b6a478a..5b47470 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,9 @@
-
- CSS Box-model Visualizer
+
+ CSS Box Model Visualizer
-A quick, easy tool to visualize and share CSS box-model examples. Customize margin, padding, border and element sizes and colors.
+A quick way to visualize and share CSS box model examples. Adjust the inputs in the control panel to customize margin, padding, border, element dimensions and colors.
diff --git a/gatsby-config.js b/gatsby-config.js
index 5f57709..fdca11b 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -1,7 +1,7 @@
module.exports = {
siteMetadata: {
- title: `CSS Box-model Visualizer`,
- description: `A quick, easy tool to visualize and share CSS box-model examples. Customize margin, padding, border and element sizes and colors.`,
+ title: `CSS Box Model Visualizer`,
+ description: `A quick way to visualize and share CSS box model examples. Adjust the inputs in the control panel to customize margin, padding, border, element dimensions and colors.`,
author: `Martin Hofmann `,
},
plugins: [
diff --git a/src/components/layout.js b/src/components/layout.js
index 545986d..95fc20a 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -67,7 +67,7 @@ const Layout = ({ children }) => (
fontSize: tokens.font.size.md,
lineHeight: 1.25,
margin: `0 auto ${tokens.space.lg}px`,
- maxWidth: '500px',
+ maxWidth: '550px',
'@media (min-width: 480px)': {
fontSize: tokens.font.size.lg,
lineHeight: 1.5,