diff --git a/src/_includes/header.njk b/src/_includes/header.njk
index 3edb5eac..38d938e3 100644
--- a/src/_includes/header.njk
+++ b/src/_includes/header.njk
@@ -26,7 +26,7 @@
    <!-- GLOBAL STYLESHEETS BEGIN -->
    <link rel="stylesheet" type="text/css" media="print" href="/css/print.css">
    <link rel="stylesheet" type="text/css" media="scree, all" href="/css/b-i-f.css">
-   <link rel="stylesheet" type="text/css" media="screen" href="/css/media.css?v=3">
+   <link rel="stylesheet" type="text/css" media="screen" href="/css/media.css?v=4">
    <link rel="stylesheet" type="text/css" media="screen, all" href="/css/webFonts.css">
    <link rel="stylesheet" type="text/css" media="screen, all" href="/css/project.css?v=2">
    <link rel="stylesheet" type="text/css" media="screen, all" href="/css/project_nav.css?v=1">   
diff --git a/src/css/media.css b/src/css/media.css
index 5c6fbf62..224242d4 100644
--- a/src/css/media.css
+++ b/src/css/media.css
@@ -151,8 +151,8 @@ http://pieroxy.net/blog/pages/css-media-queries/test-features.html
   div.code_block {
     margin-left: 10px !important;
     margin-right: 10px !important;
-    width: auto;
-    min-width: 400px;
+    /*! width: auto; */
+    /*! min-width: 400px; */
   }
 }
 
@@ -275,8 +275,6 @@ http://pieroxy.net/blog/pages/css-media-queries/test-features.html
 }
 
 
-
-/* max width of 1680px -> MY MONITOR */
 @media only screen and (max-width: 1680px) {
   h5.templateBlock {
     margin-left: 10px !important;
@@ -291,8 +289,7 @@ http://pieroxy.net/blog/pages/css-media-queries/test-features.html
   div.preview,
   pre.code_block.bad_example {
     margin-left: 10px !important;
-    margin-right: 10px !important;
-    width: auto;
+    flex-grow: 1;
   }
   .screenshot.query {
     margin-left: 10px;
diff --git a/src/css/project.css b/src/css/project.css
index ea412f2b..4e22c805 100644
--- a/src/css/project.css
+++ b/src/css/project.css
@@ -465,6 +465,9 @@ a[href]:focus {
   max-height: 220px;
   font-family: Consolas, 'Courier New', Geneva, sans-serif;
 }
+.preview {
+  margin-left: 30px;
+}
 .code_block {
   padding: 10px;
 }
diff --git a/src/templates.html b/src/templates.html
index 29fb915d..6e89b8d2 100644
--- a/src/templates.html
+++ b/src/templates.html
@@ -60,14 +60,10 @@ <h2 class="page-header">SmartTemplates :: Example Templates</h2>
     flex-wrap: wrap;
     justify-content: space-between;
   }
-  .container > * {
-    width: 50%;
-  }
 
   /* graphical preview */
   .container .preview {
     font-style: normal;
-
   }
 </style>
 
@@ -103,7 +99,8 @@ <h2 class="page-header">SmartTemplates :: Example Templates</h2>
         <h5 class="templateBlock">quote header<div class="copy" onclick="copyToClipboard(this);">copy!</div></h5>
         <div class="container">
           <div class="code_block">
-&lt;div style="display:inline-block; border: 1px gray solid; padding: 0.5em 2em 0.5em 0.5em; margin: 0.5em 0px;"&gt;<br>
+&lt;div style="display:inline-block; border: 1px gray solid; <br>
+padding: 0.5em 2em 0.5em 0.5em; margin: 0.5em 0px;"&gt;<br>
 &nbsp;&nbsp;&lt;b&gt;From:&lt;/b&gt; <code>%from(name,bracketMail(angle))%</code> &lt;br&gt;<br>
 &nbsp;&nbsp;&lt;b&gt;Sent:&lt;/b&gt; <code>%X:=sent%</code> <code>%A%</code>, <code>%B%</code> <code>%d%</code>, <code>%Y%</code> <code>%l%</code>:<code>%M%</code><code>%p(3)%</code> &lt;br&gt;<br>
 &nbsp;&nbsp;&lt;b&gt;To:&lt;/b&gt; <code>%to(name)%</code>&lt;br&gt;<br>
@@ -173,7 +170,10 @@ <h5 class="templateBlock">template<div class="copy" onclick="copyToClipboard(thi
         </p>
         <h5 class="templateBlock">template<div class="copy" onclick="copyToClipboard(this);">copy!</div></h5>
           <div class="code_block">
-&lt;div id="my_message" style="color:red; font-style:italic; font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif; "&gt;<br>
+&lt;div id="my_message" 
+style="font-family: ui-rounded, 'Hiragino Maru Gothic ProN',<br>
+Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold',<br>
+Calibri, source-sans-pro, sans-serif; color: #5E1F00; "&gt;<br>
 &nbsp;&nbsp;&lt;p&gt;Hello,&lt;/p&gt;<br>
 &nbsp;&nbsp;&lt;p&gt;<code>%cursor%</code>&lt;/p&gt;<br>
 &nbsp;&nbsp;&lt;p&gt;Thank you, &lt;br&gt;<br>
@@ -201,11 +201,11 @@ <h5 class="templateBlock">quote header<div class="copy" onclick="copyToClipboard
 &nbsp;&nbsp;min-width: 18px;<br>
 }<br>
 &lt;/style&gt;<br>
-&lt;span class="qhLabel"&gt;Subject: &lt;/span&gt;<code>%subject%</code> &lt;br&gt;<br>
-&lt;span class="qhLabel"&gt;Sent: &lt;/span&gt;<code>%date%</code> &lt;br&gt;<br>
-&lt;span class="qhLabel"&gt;From: &lt;/span&gt;<code>%from%</code> &lt;br&gt;<br>
-&lt;span class="qhLabel"&gt;To: &lt;/span&gt;<code>%to%</code> &lt;br&gt;<br>
-<span class="important">[[</span> &lt;span class="qhLabel"&gt;Cc: &lt;/span&gt;<code>%cc%</code><span class="important">]]</span> <br>
+&lt;span class="qhLabel"&gt;Subject: &lt;/span&gt; <code>%subject%</code> &lt;br&gt;<br>
+&lt;span class="qhLabel"&gt;Sent: &lt;/span&gt; <code>%date%</code> &lt;br&gt;<br>
+&lt;span class="qhLabel"&gt;From: &lt;/span&gt; <code>%from%</code> &lt;br&gt;<br>
+&lt;span class="qhLabel"&gt;To: &lt;/span&gt; <code>%to%</code> &lt;br&gt;<br>
+<span class="important">[[</span> &lt;span class="qhLabel"&gt;Cc: &lt;/span&gt; <code>%cc%</code><span class="important">]]</span> <br>
           </div>
   
           <div class="preview">
@@ -218,7 +218,7 @@ <h5 class="templateBlock">quote header<div class="copy" onclick="copyToClipboard
             </style>
             <span class="previewHeader">Preview</span>
             <div style="display:inline-block; border: 1px gray solid; padding: 0.5em 2em 0.5em 0.5em; margin: 0.5em 0px;">
-              <span class="qhLabel">Subject:</span>SmartTemplate - test email  <br>
+              <span class="qhLabel">Subject:</span> SmartTemplate - test email  <br>
               <span class="qhLabel">Sent:</span> Tue, 1 Oct 2024 14:37:24 +0100 <br>
               <span class="qhLabel">From:</span> John Doe &lt;johndoe@example.com&gt; <br>
               <span class="qhLabel">To:</span> Axel &lt;axel@example.com&gt;<br>