diff options
| author | Ajay Ramachandran <[email protected]> | 2021-10-22 01:29:46 -0400 |
|---|---|---|
| committer | Ajay Ramachandran <[email protected]> | 2021-10-22 01:29:46 -0400 |
| commit | 23bebbca7c7f54ce221f4bad3d058cc96acd5f44 (patch) | |
| tree | 1550a5b6530a0464e6991f96845e0e6b8309427c /public/help | |
| parent | 628abd03f07ce26762507e4663c7cddc649d011c (diff) | |
| download | SponsorBlock-23bebbca7c7f54ce221f4bad3d058cc96acd5f44.tar.gz SponsorBlock-23bebbca7c7f54ce221f4bad3d058cc96acd5f44.zip | |
Fix help page on mobile
Diffstat (limited to 'public/help')
| -rw-r--r-- | public/help/index.html | 9 | ||||
| -rw-r--r-- | 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 @@ <head> <title> SponsorBlock </title> <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="styles.css" rel="stylesheet"/> @@ -39,7 +40,7 @@ __MSG_helpPageFeatureDisclaimer__ </p> - <iframe src="../options/options.html#embed" width="100%" height="500px" style="border: none"></iframe> + <iframe class="optionsFrame" src="../options/options.html#embed" style="border: none"></iframe> <h1>__MSG_helpPageHowSkippingWorks__</h1> @@ -56,14 +57,12 @@ __MSG_helpPageHowSkippingWorks2__ </p> - <div class="center"><img height="120px" src="images/voting on notice.gif"></div> + <div class="center"><img src="images/voting on notice.gif"></div> <h1>__MSG_Submitting__</h1> <p class="projectPreview"> - <span class="projectPreviewImageLargeRight"> - <img src="https://i.imgur.com/A1ilk6x.gif"> - </span> + <img class="projectPreviewImageLarge" src="https://i.imgur.com/A1ilk6x.gif"> __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 |