From c8b6438f01355d69bd1ada2a1b648da4665b0cfe Mon Sep 17 00:00:00 2001
From: RichardG867 <richardg867@gmail.com>
Date: Mon, 27 Oct 2025 16:19:19 -0300
Subject: [PATCH] More CSS layout fixes

---
 _posts/2022-01-07-pcem-migration-guide.md |  5 +---
 assets/css/style.css                      | 32 ++++++++++++++---------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/_posts/2022-01-07-pcem-migration-guide.md b/_posts/2022-01-07-pcem-migration-guide.md
index 1fb70e0..ec9bdb0 100644
--- a/_posts/2022-01-07-pcem-migration-guide.md
+++ b/_posts/2022-01-07-pcem-migration-guide.md
@@ -45,8 +45,6 @@ There is **no migration path** for configuration files, as the format is too dif
 
 86Box has most of the machines PCem emulates, though we have removed, renamed and/or recategorized some of them for various reasons. The table below (make sure to scroll down) provides a reference for **v5.2**.
 
-<div class="scroll td2nowrap" markdown="block">
-
 | PCem name | 86Box category and name | Notes |
 |-----------|-------------------------|-------|
 | [8088] AMI XT clone | 8088:<br />[8088] AMI XT clone | |
@@ -142,8 +140,7 @@ There is **no migration path** for configuration files, as the format is too dif
 | [Super 7] FIC VA-503+ | Super Socket 7:<br />[VIA MVP3] FIC VA-503+ | Not to be confused with the FIC VA-503**A**, which is a very different board. |
 | [Socket 8] Intel VS440FX | Socket 8:<br />[i440FX] Intel VS440FX | See [PIIX southbridge mismatch](#piix-southbridge-mismatch). |
 | [Slot 1] Gigabyte GA-686BX | Slot 1:<br />[i440BX] Gigabyte GA-686BX | |
-
-</div>
+{: .scroll .td2nowrap}
 
 <div>&nbsp;</div>
 
diff --git a/assets/css/style.css b/assets/css/style.css
index c415052..35e96b7 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -193,11 +193,11 @@ li > ul, li > ol {
 sup {
 	font-size: x-small;
 }
-sup > a.footnote::before {
+sup a.footnote::before {
 	content: "[";
 	margin-left: 1.5px;
 }
-sup > a.footnote::after {
+sup a.footnote::after {
 	content: "]";
 }
 li:target, sup:target {
@@ -251,15 +251,23 @@ span.emoji {
 				 EmojiOne,            /* fonts are installed and the browser supports them (not Chrome */
 				 Twitter Color Emoji; /* as of writing; Firefox provides and uses Twemoji Mozilla) */
 }
-div.scroll {
-	max-height: min(500px, 67vh);
-	padding-right: 1px; /* make border less ugly on Chrome on Windows */
-	overflow-x: auto;
-	overflow-y: scroll;
-}
 table {
 	border: 1px solid #808080;
 }
+@media (max-width: 768px) {
+	table {
+		display: block;
+		width: 100%;
+		overflow-x: auto;
+	}
+}
+table.scroll {
+	display: block;
+	width: 100%;
+	max-height: min(500px, 67vh);
+	overflow-x: auto;
+	overflow-y: scroll;
+}
 tr:nth-child(odd) {
 	background: #1c293a;
 }
@@ -270,18 +278,18 @@ th, td {
 	border: 1px solid #808080;
 	padding: 5px;
 }
-div.scroll > table > thead > tr > th {
+div.scroll th {
 	position: sticky;
 	top: 0;
 	background: #1c293a;
 }
-div.td2nowrap > table > tbody > tr > td:nth-child(2) {
+.td2nowrap td:nth-child(2) {
 	white-space: nowrap;
 }
 code {
 	font-size: 0.95em;
 }
-:not(pre.highlight) > code, div.highlight {
+:not(pre.highlight) > code {
 	background: #404040;
 }
 code {
@@ -299,7 +307,7 @@ pre.highlight {
 	margin: 0;
 	padding: 6px 8px;
 }
-pre.highlight > code {
+pre.highlight code {
 	padding: 0;
 }
 pre.highlight, code {