diff --git a/wowchemy/assets/scss/wowchemy/_callouts.scss b/wowchemy/assets/scss/wowchemy/_callouts.scss
new file mode 100644
index 00000000..c229003c
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/_callouts.scss
@@ -0,0 +1,66 @@
+// Callout styles for the Callout shortcode
+
+/* Style asides as Bootstrap alerts. */
+.article-style aside {
+  @extend .alert;
+}
+
+/* Asides use <p> block element whereas alerts use <div>. */
+.article-style aside p,
+div.alert > div {
+  position: relative;
+  display: block;
+  font-size: 1rem;
+  margin-left: 2rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+div.alert div > * {
+  margin-bottom: .5rem;  /* Use smaller paragraph spacing than usual. */
+}
+
+div.alert div > :last-child {
+  margin-bottom: 0;
+}
+
+.article-style aside p::before,
+div.alert > div:first-child::before {
+  position: absolute;
+  top: -0.5rem;
+  left: -2rem;
+  font-size: 1.5rem;
+  color: #209cee;
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  content: '\f05a';
+  width: 1.5rem;
+  text-align: center;
+}
+
+div.alert-warning > div:first-child::before {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  color: #ff3860;
+  content: '\f071';
+}
+
+.article-style aside a,
+div.alert a {
+  color: currentColor;
+  text-decoration: none;
+  border-bottom: solid 1px currentColor;
+}
+
+.article-style aside,
+.alert-note {
+  color: #12537e;
+  background-color: #f6fbfe;
+  border-color: #209cee;
+}
+
+.alert-warning {
+  color: #cd0930;
+  background-color: #fff5f7;
+  border-color: #ff3860;
+}
diff --git a/wowchemy/assets/scss/wowchemy/_content.scss b/wowchemy/assets/scss/wowchemy/_content.scss
index b1bc8558..ce86434b 100644
--- a/wowchemy/assets/scss/wowchemy/_content.scss
+++ b/wowchemy/assets/scss/wowchemy/_content.scss
@@ -137,7 +137,7 @@ article .article-metadata {
 
 @mixin word-wrap() {
   // Break very long words such as pasted URL strings.
-  //overflow-wrap: break-word;
+  overflow-wrap: break-word;
   word-wrap: break-word;
   //-ms-word-break: break-all;
   //word-break: break-all;
diff --git a/wowchemy/assets/scss/wowchemy/_integrations.scss b/wowchemy/assets/scss/wowchemy/_integrations.scss
index cf3831b0..10f34562 100644
--- a/wowchemy/assets/scss/wowchemy/_integrations.scss
+++ b/wowchemy/assets/scss/wowchemy/_integrations.scss
@@ -1,6 +1,16 @@
-/* Mermaid.js div */
+// Mermaid.js diagram div
 div.mermaid {
   width: 100%;
   text-align: center;
   margin-bottom: 1rem;
 }
+
+// Plotly chart
+div.chart {
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+  // Add horizontal scroll on mobile since Plotly
+  overflow-x: auto;
+}
diff --git a/wowchemy/assets/scss/wowchemy/_root.scss b/wowchemy/assets/scss/wowchemy/_root.scss
index f28da641..02819ae9 100644
--- a/wowchemy/assets/scss/wowchemy/_root.scss
+++ b/wowchemy/assets/scss/wowchemy/_root.scss
@@ -41,6 +41,7 @@ body.no-navbar {
   min-height: calc(100vh - 70px);
   display: grid;
   grid-template-rows: auto 1fr auto;
+  grid-template-columns: 100vw;
 }
 @include media-breakpoint-down(md) {
   .page-wrapper {
@@ -570,72 +571,3 @@ table > tbody > tr:hover > td,
 table > tbody > tr:hover > th {
   background-color: #e5e5e5;
 }
-
-/*************************************************
- *  Article Alerts (Shortcode) and Asides (Mmark)
- **************************************************/
-
-/* Style asides as Bootstrap alerts. */
-.article-style aside {
-  @extend .alert;
-}
-
-/* Asides use <p> block element whereas alerts use <div>. */
-.article-style aside p,
-div.alert > div {
-  position: relative;
-  display: block;
-  font-size: 1rem;
-  margin-left: 2rem;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-div.alert div > * {
-  margin-bottom: .5rem;  /* Use smaller paragraph spacing than usual. */
-}
-
-div.alert div > :last-child {
-  margin-bottom: 0;
-}
-
-.article-style aside p::before,
-div.alert > div:first-child::before {
-  position: absolute;
-  top: -0.5rem;
-  left: -2rem;
-  font-size: 1.5rem;
-  color: #209cee;
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 900;
-  content: '\f05a';
-  width: 1.5rem;
-  text-align: center;
-}
-
-div.alert-warning > div:first-child::before {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 900;
-  color: #ff3860;
-  content: '\f071';
-}
-
-.article-style aside a,
-div.alert a {
-  color: currentColor;
-  text-decoration: none;
-  border-bottom: solid 1px currentColor;
-}
-
-.article-style aside,
-.alert-note {
-  color: #12537e;
-  background-color: #f6fbfe;
-  border-color: #209cee;
-}
-
-.alert-warning {
-  color: #cd0930;
-  background-color: #fff5f7;
-  border-color: #ff3860;
-}
diff --git a/wowchemy/assets/scss/wowchemy/wowchemy.scss b/wowchemy/assets/scss/wowchemy/wowchemy.scss
index 2b3e8bfa..6cbaaecb 100644
--- a/wowchemy/assets/scss/wowchemy/wowchemy.scss
+++ b/wowchemy/assets/scss/wowchemy/wowchemy.scss
@@ -6,6 +6,7 @@
  **************************************************/
 
 @import "root";
+@import "callouts";
 @import "icons";
 @import "footer";
 @import "nav";
diff --git a/wowchemy/layouts/shortcodes/chart.html b/wowchemy/layouts/shortcodes/chart.html
index 68f2d075..fedd02a2 100644
--- a/wowchemy/layouts/shortcodes/chart.html
+++ b/wowchemy/layouts/shortcodes/chart.html
@@ -1,6 +1,6 @@
 {{ $json := printf "./%s.json" (.Get "data") }}
 {{ $id := delimit (shuffle (seq 1 9)) "" }}
-<div id="chart-{{$id}}" class="chart pb-3" style="max-width: 100%; margin: auto;"></div>
+<div id="chart-{{$id}}" class="chart"></div>
 <script>
   (function() {
     let a = setInterval( function() {