diff --git a/assets/javascripts/initializers/discourse-math-katex.js.es6 b/assets/javascripts/initializers/discourse-math-katex.js.es6
index 78f4b62..038b311 100644
--- a/assets/javascripts/initializers/discourse-math-katex.js.es6
+++ b/assets/javascripts/initializers/discourse-math-katex.js.es6
@@ -22,7 +22,7 @@ function decorate(elem) {
 
   if ($elem.hasClass("math")) {
     const text = $elem.text();
-    $elem.text("");
+    $elem.addClass("math-container").text("");
     window.katex.render(text, elem, { displayMode });
   }
 }
diff --git a/assets/javascripts/initializers/discourse-math-mathjax.js.es6 b/assets/javascripts/initializers/discourse-math-mathjax.js.es6
index 288a4ae..6f9dd8e 100644
--- a/assets/javascripts/initializers/discourse-math-mathjax.js.es6
+++ b/assets/javascripts/initializers/discourse-math-mathjax.js.es6
@@ -49,14 +49,14 @@ function decorate(elem, isPreview) {
     const tag = elem.tagName === "DIV" ? "div" : "span";
     const display = tag === "div" ? "; mode=display" : "";
     $mathWrapper = $(
-      `<${tag} style="display: none;"><script type="math/tex${display}"></script></${tag}>`
+      `<${tag} class="math-container" style="display: none;"><script type="math/tex${display}"></script></${tag}>`
     );
     $math = $mathWrapper.children();
     $math.text($elem.text());
     $elem.after($mathWrapper);
   } else if ($elem.hasClass("asciimath")) {
     $mathWrapper = $(
-      `<span style="display: none;"><script type="math/asciimath"></script></span>`
+      `<span class="math-container" style="display: none;"><script type="math/asciimath"></script></span>`
     );
     $math = $mathWrapper.children();
     $math.text($elem.text());
diff --git a/assets/stylesheets/common/discourse-math.scss b/assets/stylesheets/common/discourse-math.scss
new file mode 100644
index 0000000..8ddf500
--- /dev/null
+++ b/assets/stylesheets/common/discourse-math.scss
@@ -0,0 +1,59 @@
+.math-container {
+  display: block;
+
+  > div:nth-child(2),
+  > span:nth-child(2),
+  > .katex-display {
+    // Mathjax ships with !important inline;
+    display: block !important;
+    max-width: 100%;
+    margin-bottom: 1em;
+
+    // Inner containers for all renderers
+    > :first-child:not(.katex),
+    .katex-html {
+      display: block;
+      overflow: auto hidden;
+      max-width: 100%;
+      padding: 0.25em 0.5em;
+      box-sizing: border-box;
+    }
+  }
+
+  // On mobile we add a slight fade on either side to indicate that the user can
+  // scroll. However, this should not be added to the composer since mathjax does
+  // not render in the mobile composer
+  .cooked & {
+    .mobile-view & {
+      position: relative;
+      &:before {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 1em;
+        height: 100%;
+        background: linear-gradient(
+          to right,
+          rgba($secondary, 1) 0%,
+          rgba($secondary, 0) 100%
+        );
+      }
+      &:after {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        right: 0;
+        top: 0;
+        width: 1em;
+        height: 100%;
+        background: linear-gradient(
+          to right,
+          rgba($secondary, 0) 0%,
+          rgba($secondary, 1) 100%
+        );
+      }
+    }
+  }
+}
diff --git a/plugin.rb b/plugin.rb
index 3d97c2b..22b9407 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -6,4 +6,6 @@
 # authors: Sam Saffron (sam)
 # url: https://github.com/discourse/discourse-math
 
+register_asset "stylesheets/common/discourse-math.scss"
+
 enabled_site_setting :discourse_math_enabled