Justifies text on reduced screen size

dixonandmoe · Jun 5, 2020 · ac25293 · ac25293
1 parent 7402f5b
commit ac25293
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/css/main.css b/css/main.css
@@ -109,11 +109,9 @@ header h3 {
   Main
 ------------------------------------*/
 
-
 /* .main {
   /* overflow: hidden; */
 
-
 .section {
   position: relative;
 }
@@ -300,6 +298,7 @@ h2.heading {
 }
 h3.heading {
   font-size: 27px;
+  font-weight: bolder;
 }
 
 .documentation {
@@ -420,23 +419,27 @@ html {
 ------------------------------------*/
 
 @media (max-width: 991px) {
-
 }
 
 /*----------------------------------
   Small devices: iPhone 6+ and below
 ------------------------------------*/
 
 @media (max-width: 767px) {
-.sticky {
-  display: none;
-}
+  .sticky {
+    display: none;
+  }
 }
 
 /*----------------------------------
   iPhone 6 & 6+ specific text bump
 ------------------------------------*/
 
 @media (max-width: 991px) and (max-height: 736px) and (min-height: 481px) {
-
+  .sticky {
+    display: none;
+  }
+  p {
+    text-align: justify;
+  }
 }
diff --git a/demo.html b/demo.html
@@ -450,7 +450,7 @@ <h2 class="heading">Horizontal Parallax</h2>
                 <h2 class="heading">Custom Wrapper</h2>
                 <p style="font-weight: lighter;">
                   By default, the position of parallax elements is determined via the scroll
-                  position of the body. Passing in the <br><kbd><span class="orange">wrapper</span></kbd>
+                  position of the body. Passing in the <kbd><span class="orange">wrapper</span></kbd>
                   property in the settings block will tell Rellax to watch that element instead.
                 </p>
                 <br>