Fix text overlapping image in Edge and on mobile (#582)

Changing the way the background image is positioned and the box is sized should fix problems with the text overlapping the image on mobile browsers and Edge.

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 471fff11e96fa8559066738f9aaceff981452a36..e077fbca2f0a699f029ee4b7e58e82b639f69ba7 100644 (file)
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -684,8 +684,8 @@
   box-sizing: border-box;
   overflow-y: auto;
   padding-bottom: 235px;
-  background: image-url('mastodon-getting-started.png') no-repeat 0 100% local;
-  height: 100%;
+  background: image-url('mastodon-getting-started.png') no-repeat 100% bottom;
+  height: auto;
 
   p {
     color: $color2;