Web Dev Solutions

Catalin Mititiuc

From 7c1cc97bd262bc9fe32fb652eca80bdedc758d81 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Wed, 27 Mar 2024 15:07:04 -0700 Subject: Scroll the record sheet sides individually when viewport width is narrow --- style.css | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/style.css b/style.css index 98d8373..e16e9cf 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,3 @@ -@media (width >= 1800px) { - #record-sheet { - display: flex; - } -} - body { margin: 0; max-height: 100vh; @@ -31,12 +25,15 @@ div#content { #record-sheet { /* max-height: 100%; */ overflow-y: auto; - /* display: flex; */ + display: flex; + flex-direction: column; /* display: none; */ } #record-sheet > div { padding: 0 2px; + max-height: 50%; + overflow-y: auto; } #record-sheet > div > div { @@ -167,4 +164,15 @@ rect#debug-view-box { stroke-width: 20px; */ fill: blue; fill-opacity: 0.2; +} + +@media (width >= 1800px) { + #record-sheet { + flex-direction: row; + } + + #record-sheet > div { + max-height: unset; + overflow-y: unset; + } } \ No newline at end of file -- cgit v1.2.3