From 4ae354f108acaef8c78b778124d4638904bd7c69 Mon Sep 17 00:00:00 2001 From: "Adam T. Carpenter" Date: Sun, 9 Jun 2024 18:19:23 -0400 Subject: fix: mobile brochure viewing --- brochure/index.php | 10 ++++++++-- brochure/styles.css | 17 +++++++++++------ 2 files changed, 19 insertions(+), 8 deletions(-) (limited to 'brochure') diff --git a/brochure/index.php b/brochure/index.php index 237266d..6dd3621 100644 --- a/brochure/index.php +++ b/brochure/index.php @@ -1,10 +1,16 @@
-

Click on pages to fold and unfold and use the Flip button to toggle front and back.

+ + +

+ Click on pages to fold and unfold and use Flip to toggle front and back. This works best on a tablet or desktop screen. +

diff --git a/brochure/styles.css b/brochure/styles.css index 351bc00..2abb118 100644 --- a/brochure/styles.css +++ b/brochure/styles.css @@ -12,10 +12,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI .paper { display: grid; - width: 21.25em; + width: 8.25rem; - grid-template-columns: 21.25em; - grid-template-rows: 50em; /* .425 aspect */ + grid-template-columns: 8.25rem; + grid-template-rows: 19.41rem; /* .425 aspect */ margin: 2rem auto; @@ -40,9 +40,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI } .paper .page .side { - width: inherit; - height: inherit; - position: absolute; top: 0; left: 0; @@ -86,3 +83,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI transform-origin: center right; } +@media only screen and (min-width: 1500px) { + .paper { + width: 21.25em; + + grid-template-columns: 21.25em; + grid-template-rows: 50em; /* .425 aspect */ + } +} -- cgit v1.2.3