diff --git a/README.md b/README.md
index 91e67b63..192fabdf 100644
--- a/README.md
+++ b/README.md
@@ -9,10 +9,10 @@ _Know when web pages change! Stay ontop of new information!_
Live your data-life *pro-actively* instead of *re-actively*.
-Open source web page monitoring, notification and change detection.
+Free, Open-source web page monitoring, notification and change detection. Don't have time? [Try our $6.99/month plan - unlimited checks and watches!](https://lemonade.changedetection.io/start)
-
+[](https://lemonade.changedetection.io/start)
**Get your own private instance now! Let us host it for you!**
diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css
index c1698382..cdcd2487 100644
--- a/changedetectionio/static/styles/styles.css
+++ b/changedetectionio/static/styles/styles.css
@@ -244,7 +244,7 @@ footer {
.sticky-tab {
position: absolute;
top: 60px;
- font-size: 8px;
+ font-size: 65%;
background: #fff;
padding: 10px; }
.sticky-tab#left-sticky {
@@ -310,14 +310,23 @@ footer {
#nav-menu {
overflow-x: scroll; } }
-/*
+@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) {
+ div.sticky-tab#hosted-sticky {
+ top: 60px;
+ left: 0px;
+ right: auto; }
+ section.content {
+ padding-top: 110px; }
+ div.tabs ul li {
+ display: block;
+ border-radius: 0px; }
+ input[type='text'] {
+ width: 100%; }
+ /*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
-@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
- input[type='text'] {
- width: 100%; }
.watch-table {
/* Force table to not be like tables anymore */
/* Force table to not be like tables anymore */
diff --git a/changedetectionio/static/styles/styles.scss b/changedetectionio/static/styles/styles.scss
index 9a956f7f..5ca7eb31 100644
--- a/changedetectionio/static/styles/styles.scss
+++ b/changedetectionio/static/styles/styles.scss
@@ -322,7 +322,7 @@ footer {
.sticky-tab {
position: absolute;
top: 60px;
- font-size: 8px;
+ font-size: 65%;
background: #fff;
padding: 10px;
left-sticky {
@@ -422,18 +422,35 @@ footer {
}
}
-/*
-Max width before this PARTICULAR table gets nasty
-This query will take effect for any screen smaller than 760px
-and also iPads specifically.
-*/
-@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) {
+
+ div.sticky-tab#hosted-sticky {
+ top: 60px;
+ left: 0px;
+ right: auto;
+ }
+
+ section.content {
+ padding-top: 110px;
+ }
+
+ // Make the tabs easier to hit, they will be all nice and horizontal
+ div.tabs ul li {
+ display: block;
+ border-radius: 0px;
+ }
input[type='text'] {
width: 100%;
}
-
+
+/*
+Max width before this PARTICULAR table gets nasty
+This query will take effect for any screen smaller than 760px
+and also iPads specifically.
+*/
.watch-table {
/* Force table to not be like tables anymore */
thead, tbody, th, td, tr {