aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAjay Ramachandran <[email protected]>2021-10-22 01:29:46 -0400
committerAjay Ramachandran <[email protected]>2021-10-22 01:29:46 -0400
commit23bebbca7c7f54ce221f4bad3d058cc96acd5f44 (patch)
tree1550a5b6530a0464e6991f96845e0e6b8309427c
parent628abd03f07ce26762507e4663c7cddc649d011c (diff)
downloadSponsorBlock-23bebbca7c7f54ce221f4bad3d058cc96acd5f44.tar.gz
SponsorBlock-23bebbca7c7f54ce221f4bad3d058cc96acd5f44.zip
Fix help page on mobile
-rw-r--r--public/help/index.html9
-rw-r--r--public/help/styles.css52
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