From 23bebbca7c7f54ce221f4bad3d058cc96acd5f44 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Fri, 22 Oct 2021 01:29:46 -0400 Subject: [PATCH] Fix help page on mobile --- public/help/index.html | 9 ++++---- public/help/styles.css | 52 ++++++++++++++++++++++++++---------------- 2 files changed, 36 insertions(+), 25 deletions(-) diff --git a/public/help/index.html b/public/help/index.html index 4d69f321..88742e0d 100644 --- a/public/help/index.html +++ b/public/help/index.html @@ -3,6 +3,7 @@ SponsorBlock + @@ -39,7 +40,7 @@ __MSG_helpPageFeatureDisclaimer__

- +

__MSG_helpPageHowSkippingWorks__

@@ -56,14 +57,12 @@ __MSG_helpPageHowSkippingWorks2__

-
+

__MSG_Submitting__

- - - + __MSG_helpPageSubmitting1__ diff --git a/public/help/styles.css b/public/help/styles.css index 2e392c2e..fea609a2 100644 --- a/public/help/styles.css +++ b/public/help/styles.css @@ -40,14 +40,6 @@ body { transform: translateY(-20%); } -.projectPreviewImageLargeRight { - position: absolute; - right: -210px; - width: 200px; - top: 50%; - transform: translateY(-50%); -} - .createdBy { font-size: 14px; text-align: center; @@ -142,18 +134,9 @@ p,li,code,a { overflow-wrap: break-word; } -@media screen and (orientation:portrait) { - p,li,code,a { - max-width: 100%; - } - - .projectPreviewImage { - position: unset; - width: 130px; - display: block; - margin: auto; - transform: none; - } +.optionsFrame { + width: 100%; + height: 500px; } .previewImage { @@ -187,4 +170,33 @@ svg { #sbDonate { font-size: 10px; +} + +@media screen and (orientation:portrait) { + .projectPreviewImage { + position: unset; + width: 50%; + display: block; + margin: auto; + transform: none; + } + + .projectPreviewImageLarge { + position: unset; + left: 0; + width: 50%; + display: block; + margin: auto; + transform: unset; + } + + .container { + max-width: 100%; + margin: 5px; + text-align: center; + } + + p,li,code,a { + text-align: center; + } } \ No newline at end of file