diff --git a/src/content/blog/2026-05-19-deconstructing-brass-lancashire.mdx b/src/content/blog/2026-05-19-deconstructing-brass-lancashire.mdx
index b53dcef..c0f8fa7 100644
--- a/src/content/blog/2026-05-19-deconstructing-brass-lancashire.mdx
+++ b/src/content/blog/2026-05-19-deconstructing-brass-lancashire.mdx
@@ -97,59 +97,61 @@ I am also not accounting for the second-level and higher industry tiles being sc
 
 In this table each industry is listed with all of it's levels and the VP and income per money and action are calculated.
 
-<table>
-  <tr>
-    <th>Industry Name</th>
-    <th>Level</th>
-    <th>Cost</th>
-    <th>VP</th>
-    <th>VP/Money</th>
-    <th>VP/Action</th>
-    <th>Income</th>
-    <th>Income/Money</th>
-    <th>Income/Action</th>
-  </tr>
-  {(() => {
-    const rows = analysisRows(2, 2);
-    const maxVpPerMoney = Math.max(...rows.map((row) => row.vpPerMoney));
-    const maxVpPerAction = Math.max(...rows.map((row) => row.vpPerAction));
-    const maxIncomePerMoney = Math.max(
-      ...rows.map((row) => row.incomePerMoney),
-    );
-    const maxIncomePerAction = Math.max(
-      ...rows.map((row) => row.incomePerAction),
-    );
-    return rows.map((row) => (
-      <tr>
-        <td>{row.industryName}</td>
-        <td>{row.industryLevel}</td>
-        <td>{row.cost}</td>
-        <td>{row.vp}</td>
-        <td
-          style={`color: rgb(${255 * (1 - row.vpPerMoney / maxVpPerMoney)}, ${(255 * row.vpPerMoney) / maxVpPerMoney}, 0)`}
-        >
-          {row.vpPerMoney.toFixed(2)}
-        </td>
-        <td
-          style={`color: rgb(${255 * (1 - row.vpPerAction / maxVpPerAction)}, ${(255 * row.vpPerAction) / maxVpPerAction}, 0)`}
-        >
-          {row.vpPerAction.toFixed(2)}
-        </td>
-        <td>{row.income}</td>
-        <td
-          style={`color: rgb(${255 * (1 - row.incomePerMoney)}, ${255 * row.incomePerMoney}, 0)`}
-        >
-          {row.incomePerMoney.toFixed(2)}
-        </td>
-        <td
-          style={`color: rgb(${255 * (1 - row.incomePerAction / maxIncomePerAction)}, ${(255 * row.incomePerAction) / maxIncomePerAction}, 0)`}
-        >
-          {row.incomePerAction.toFixed(2)}
-        </td>
-      </tr>
-    ));
-  })()}
-</table>
+<div class="overflow">
+  <table>
+    <tr>
+      <th>Industry Name</th>
+      <th>Level</th>
+      <th>Cost</th>
+      <th>VP</th>
+      <th>VP/Money</th>
+      <th>VP/Action</th>
+      <th>Income</th>
+      <th>Income/Money</th>
+      <th>Income/Action</th>
+    </tr>
+    {(() => {
+      const rows = analysisRows(2, 2);
+      const maxVpPerMoney = Math.max(...rows.map((row) => row.vpPerMoney));
+      const maxVpPerAction = Math.max(...rows.map((row) => row.vpPerAction));
+      const maxIncomePerMoney = Math.max(
+        ...rows.map((row) => row.incomePerMoney),
+      );
+      const maxIncomePerAction = Math.max(
+        ...rows.map((row) => row.incomePerAction),
+      );
+      return rows.map((row) => (
+        <tr>
+          <td>{row.industryName}</td>
+          <td>{row.industryLevel}</td>
+          <td>{row.cost}</td>
+          <td>{row.vp}</td>
+          <td
+            style={`color: rgb(${255 * (1 - row.vpPerMoney / maxVpPerMoney)}, ${(255 * row.vpPerMoney) / maxVpPerMoney}, 0)`}
+          >
+            {row.vpPerMoney.toFixed(2)}
+          </td>
+          <td
+            style={`color: rgb(${255 * (1 - row.vpPerAction / maxVpPerAction)}, ${(255 * row.vpPerAction) / maxVpPerAction}, 0)`}
+          >
+            {row.vpPerAction.toFixed(2)}
+          </td>
+          <td>{row.income}</td>
+          <td
+            style={`color: rgb(${255 * (1 - row.incomePerMoney)}, ${255 * row.incomePerMoney}, 0)`}
+          >
+            {row.incomePerMoney.toFixed(2)}
+          </td>
+          <td
+            style={`color: rgb(${255 * (1 - row.incomePerAction / maxIncomePerAction)}, ${(255 * row.incomePerAction) / maxIncomePerAction}, 0)`}
+          >
+            {row.incomePerAction.toFixed(2)}
+          </td>
+        </tr>
+      ));
+    })()}
+  </table>
+</div>
 
 ### Cotton Mills
 
diff --git a/src/layouts/RootLayout.astro b/src/layouts/RootLayout.astro
index 923584e..1144c96 100644
--- a/src/layouts/RootLayout.astro
+++ b/src/layouts/RootLayout.astro
@@ -33,7 +33,25 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
     </div>
 	</body>
   <style>
-    @media (max-width: 1000px) {
+    @media (min-width: 1000px) {
+      body {
+        grid-template-areas: 
+          "header header"
+          "sidebar main"
+          "footer footer";
+        grid-template-columns: 20rem 1fr;
+        margin: 2rem 1rem;
+        max-width: 1600px;
+      }
+      .header {
+        display: none;
+      }
+      .sidebar {
+        display: block;
+      }
+    }
+
+    @media (min-width: 500px) and (max-width: 1000px) {
       body {
         grid-template-areas: 
           "header"
@@ -53,28 +71,27 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
       }
     }
 
-    @media (min-width: 1000px) {
-      body {
-        grid-template-areas: 
-          "header header"
-          "sidebar main"
-          "footer footer";
-        grid-template-columns: 20rem 1fr;
-        margin: 2rem 1rem;
-        max-width: 1600px;
-      }
-      .header {
-        display: none;
-      }
-      .sidebar {
-        display: block;
-      }
-    }
-
     @media (max-width: 500px) {
       body {
+        grid-template-areas: 
+          "header"
+          "main"
+          "footer";
+        grid-template-columns: 1fr;
+        margin: 1rem 0;
         font-size: 14px;
       }
+
+      main {
+        padding: 0;
+      }
+
+      .header {
+        display: block;
+      }
+      .sidebar {
+        display: none;
+      }
     }
 
     body {
@@ -96,6 +113,11 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
       flex-direction: column;
       align-items: stretch;
       justify-content: stretch;
+      min-width: 0;
+    }
+
+    main > * {
+      min-width: 0;
     }
 
     .footer { 
diff --git a/src/styles/global.css b/src/styles/global.css
index 66f1753..7efa7d3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -110,7 +110,6 @@ body {
   font-size: var(--font-size-md);
   line-height: 1.7;
   background-color: var(--color-space-blue);
-  min-width: 360px;
 }
 
 main {
@@ -220,3 +219,8 @@ figure {
   /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
   white-space: nowrap;
 }
+
+.overflow {
+  width: 100%;
+  overflow: scroll;
+}