diff --git a/site/templates/demos.html b/site/templates/demos.html
index 99bf35c3da..8e68551344 100644
--- a/site/templates/demos.html
+++ b/site/templates/demos.html
@@ -10,16 +10,25 @@
 </h2>
 <div class="code-boxes clearfix">
   {%- set items = resource.pages|find_demo_in_component(post.meta.directory) %}
-  <div class="code-boxes-col">
+  {%- if post.meta.cols == 1 %}
+    <div class="code-boxes-col-1-1">
+      {%- for item in items %}
+      {%- set post = item.meta.filepath|parsePost %}
+      {%- include "code.html" %}
+      {%- endfor %}
+    </div>
+  {%- else %}
+  <div class="code-boxes-col-2-1">
     {%- for item in items|odd %}
     {%- set post = item.meta.filepath|parsePost %}
     {%- include "code.html" %}
     {%- endfor %}
   </div>
-  <div class="code-boxes-col">
+  <div class="code-boxes-col-2-1">
     {%- for item in items|even %}
     {%- set post = item.meta.filepath|parsePost %}
     {%- include "code.html" %}
     {%- endfor %}
   </div>
+  {%- endif %}
 </div>
diff --git a/static/style.css b/static/style.css
index 754164f2c7..7c6c8c20e0 100644
--- a/static/style.css
+++ b/static/style.css
@@ -518,6 +518,7 @@ footer ul li > a {
 
 .main-container {
   width: 100%;
+  width: calc(100% - 260px);
   margin-left: 260px;
   padding: 30px 40px 120px;
   -webkit-animation: xRightMatrix .5s ease-out;
@@ -1642,13 +1643,17 @@ footer ul li > a {
   color: #3B4357;
 }
 
-.code-boxes-col {
+.code-boxes-col-1-1 {
+  width: 75%;
+}
+
+.code-boxes-col-2-1 {
   width: 50%;
   float: left;
   padding-right: 15px;
 }
 
-.code-boxes-col:last-child {
+.code-boxes-col-2-1:last-child {
   padding-right: 0;
 }