Merge pull request #73 from PayButton/fix/unlocked-content-indicator-mobile-view

Fix 'Unlocked Content Indicator' for Mobile View

Author: Klakurka

assets/css/paywall-styles.css

@@ -4,23 +4,33 @@
   margin: 2rem 0;
   color: var(--pb-unlocked-indicator-color);      /* Line + text color */
   font-family: inherit;
-  font-weight: 800;                /* Strong text */
   font-size: 1rem;
+  text-align:center;
+}
+
+/* Mobile override rule */
+@media (max-width: 600px) {
+  .unlocked-indicator {
+    font-size: 9px;
+  }
 }
 
 .unlocked-indicator::before,
 .unlocked-indicator::after {
   content: "";
-  flex: 1;
+  flex: 1 1 auto;
+  min-width: 20px;
   height: 1px;
   background: currentColor;                  /* Uses the same color as the text */
 }
 
 .unlocked-indicator span {
+  display: inline-block;
   padding: 0 1rem;                           /* Space between text and lines */
+  word-break: break-word; 
 }
 
-/* Show Unlock Count on Front-end */
+/* Show Unlock Count on the Front-end */
 .pb-frontend-unlock-count {
   color: var(--pb-frontend-unlock-color, #0074C2);
   margin-bottom: 1em;