diff --git a/app/build/plugins/zoom/public.css b/app/build/plugins/zoom/public.css
index 60a4bc2adc0..074c49f2c2c 100644
--- a/app/build/plugins/zoom/public.css
+++ b/app/build/plugins/zoom/public.css
@@ -11,7 +11,7 @@ The CSS below adds a special cursor.
 
 p, div, section {position: relative;overflow: visible;} /* Ensure the code works for nested images */
 .image {overflow: visible!important} /* Overwrite previously superfluous code */
-.left, .right {position: relative;z-index: 667}
+/*.left, .right, .column {position: relative;z-index: 667}*/
 .wide {overflow: visible!important}
 
 .zoom-overlay-open .left,
diff --git a/app/templates/latest/diary/style.css b/app/templates/latest/diary/style.css
index 56fe8053501..71b66d1c73f 100644
--- a/app/templates/latest/diary/style.css
+++ b/app/templates/latest/diary/style.css
@@ -70,6 +70,7 @@ div.header {padding: 1.45rem;margin:1.4rem;display: flex;align-items:baseline;po
 .column img {margin-top: 6px}
 
 .margin p {font-style: italic;font-size: 0.9em;margin-top: 0}
+.column p {margin-top: 0}
 .margin h1, .margin h2, .margin h3 {margin-top:0}
 
 .left.margin {
@@ -105,15 +106,21 @@ div.header {padding: 1.45rem;margin:1.4rem;display: flex;align-items:baseline;po
   padding-right: 12px;
 }
 
-.column.three {
-  width: 33%;
-  padding-right: 24px;
-}
 
 .column.two + .column.two {
   padding: 0 0 0 12px;
 }
 
+.column.three {width: 33.333333%;padding: 0 16px 0 0;}
+.column.three + .column.three {padding: 0 8px}
+.column.three + .column.three + .column.three {padding: 0 0 0 16px}
+
+.column.four {width: 25%;padding-right: 18px;}
+.column.four + .column.four {padding: 0 12px 0 6px;}
+.column.four + .column.four + .column.four {padding: 0 6px 0 12px;}
+.column.four + .column.four + .column.four + .column.four {padding: 0 0 0 18px;}
+
+
 .column h1,
 .column h2,
 .column h3 {margin-bottom: -12px}
diff --git a/app/templates/latest/essay/plugin.css b/app/templates/latest/essay/plugin.css
index 52feb41d1fe..4f00c237ec4 100644
--- a/app/templates/latest/essay/plugin.css
+++ b/app/templates/latest/essay/plugin.css
@@ -164,7 +164,7 @@ pre, code {font: inherit;}
 .wide.left {margin: 0 0 0 -29.3333333%}
 .wide.right {margin: 0 -29.3333333% 0 0}
 
-.margin p {margin-top: 2px}
+.margin p, .column p {margin-top: 2px}
 .margin h1, .margin h2, .margin h3 {margin-top:0}
 
 .column {
@@ -177,10 +177,16 @@ pre, code {font: inherit;}
   padding-right: 12px;
 }
 
-.column.three {
-  width: 33%;
-  padding-right: 24px;
-}
+.column.three {width: 33.333333%;padding: 0 16px 0 0;}
+.column.three + .column.three {padding: 0 8px}
+.column.three + .column.three + .column.three {padding: 0 0 0 16px}
+
+.column.four {width: 25%;padding-right: 18px;}
+.column.four + .column.four {padding: 0 12px 0 6px;}
+.column.four + .column.four + .column.four {padding: 0 6px 0 12px;}
+.column.four + .column.four + .column.four + .column.four {padding: 0 0 0 18px;}
+
+
 
 .column.two + .column.two {
   padding: 0 0 0 12px;
diff --git a/app/templates/latest/magazine/css-layout.css b/app/templates/latest/magazine/css-layout.css
index df68487ae63..fcff9eff8fd 100644
--- a/app/templates/latest/magazine/css-layout.css
+++ b/app/templates/latest/magazine/css-layout.css
@@ -1,65 +1,82 @@
-/* LAYOUT */
+/* Fixes a bug with the image zoom plugin on this template */
+p, div, section {position: static;} 
 
-/* Ensure consistency in the layout.css for users with the image zoom plugin
-   and those without. What a nightmare! */
+/* LAYOUT */
 
 .container {position: relative;}
 
 .margin {
+  position: absolute;
   box-sizing: border-box;
-  width: 33%;
-  overflow: auto;
+  width: 29.3333%;
 }
 
+.margin p {font-style: italic;}
 
+.left.margin {
+  left: -29.3333%;
+  padding-right: 30px;
+  text-align: right;
+}
 
+.right.margin {
+  right: -29.3333%;
+  padding-left: 30px;
+}
 
-.margin > :first-child,
-.inside > :first-child {margin-top:0}
+.wide {
+  width: 158.6666667%;
+  margin-left: -29.3333333%;
+  overflow: auto; /* collapses internal margins */
+}
 
-.margin h1, .margin h2, .margin h3 {margin-top:0}
-.margin p,
-.inside p {font-size:0.875rem;line-height:1.425}
+.wide.left, .wide.right {width: 129.3333333%;float: none;}
+.wide.left {margin: 0 0 0 -29.3333333%}
+.wide.right {margin: 0 -29.3333333% 0 0}
 
-.margin p img {margin-top: 5px}
+.margin p, .column p {margin-top: 2px}
+.margin h1, .margin h2, .margin h3 {margin-top:0}
 
-.left.margin,
-.left.inside {
+.column {
+  box-sizing: border-box;
   float: left;
-  padding-right: 2rem;
-  /* margin-top: 3rem; */
-  max-width: 35%;
 }
 
-.right.inside {
-  max-width:35%;
-  float:right;
-  padding-left:2rem;
+.column.two {
+  width: 50%;
+  padding-right: 12px;
 }
 
-.right.margin {
-  position: absolute;
-  right: -35.58%;
-  width: 35.58%;
-  padding-left: 3rem;
-}
+.column.three {width: 33.333333%;padding: 0 16px 0 0;}
+.column.three + .column.three {padding: 0 8px}
+.column.three + .column.three + .column.three {padding: 0 0 0 16px}
 
-.wide {
-  width: 142%;
-  overflow: auto; /* collapse internal margins */
-}
+.column.four {width: 25%;padding-right: 18px;}
+.column.four + .column.four {padding: 0 12px 0 6px;}
+.column.four + .column.four + .column.four {padding: 0 6px 0 12px;}
+.column.four + .column.four + .column.four + .column.four {padding: 0 0 0 18px;}
 
-.wide.left, .wide.right {
-  width: 129.3333333%;
-  float: none;
-  margin: 0 -29.3333333% 0 0;
+
+
+.column.two + .column.two {
+  padding: 0 0 0 12px;
 }
 
-.column {box-sizing: border-box;float: left;}
+@media screen and (max-width: 1060px) {
 
-.column.two {width: 50%;padding-right: 11px;}
+  .margin,
+  .margin.right,
+  .margin.left {position: relative;display: block;top: auto;left: auto;right: auto;bottom: auto;}
 
-.column.three {width: 33%;padding-right: 22px;}
+  .margin.right {float: right;}
+  .margin.left {text-align: left;float: left;}
 
-.column.two + .column.two {padding: 0 0 0 11px;}
+  .wide, .wide.left, .wide.right {width: 100%;margin: 0}
+}
 
+
+@media screen and (max-width: 600px) {
+  .margin {width: 40%;}
+  .margin.right {padding-left: 16px;}
+  .margin.left {padding-right: 16px;}
+}