More CSS layout fixes

Author: richardg867

_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>
 

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 {
+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);
-	padding-right: 1px; /* make border less ugly on Chrome on Windows */
 	overflow-x: auto;
 	overflow-y: scroll;
 }
-table {
-	border: 1px solid #808080;
-}
 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 {