diff --git a/lib/componentFactory.js b/lib/componentFactory.js
index 0361e4d..c830ad6 100644
--- a/lib/componentFactory.js
+++ b/lib/componentFactory.js
@@ -33,7 +33,7 @@ module.exports = function(element) {
       }
 
       // If the button is expanded, it needs a <center> tag around the content
-      if (element.hasClass('expand')) {
+      if (element.hasClass('expand') || element.hasClass('expanded')) {
         inner = format('<center>%s</center>', inner);
         expander = '\n<td class="expander"></td>';
       }
@@ -111,14 +111,29 @@ module.exports = function(element) {
     case this.components.spacer:
       var classes = ['spacer'];
       var size = 16;
+      var html = '';
       if (element.attr('class')) {
         classes = classes.concat(element.attr('class').split(' '));
       }
       if (element.attr('size')) {
         size = (element.attr('size'));
+        html += '<table class="%s"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>';
+      } else {
+        if (element.attr('size-sm')) {
+          size = (element.attr('size-sm'));
+          html += '<table class="%s hide-for-large"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>';
+        }
+        if (element.attr('size-lg')) {
+          size = (element.attr('size-lg'));
+          html += '<table class="%s show-for-large"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>';
+        }
+      }
+      
+      if( element.attr('size-sm') && element.attr('size-lg') ) {
+        return format(html, classes.join(' '), classes.join(' '), inner);
       }
 
-      return format('<table class="%s"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>', classes.join(' '), inner);
+      return format(html, classes.join(' '), inner);
 
     // <wrapper>
     case this.components.wrapper:
diff --git a/test/components.js b/test/components.js
index 1e3af90..e6ff3af 100644
--- a/test/components.js
+++ b/test/components.js
@@ -246,6 +246,58 @@ describe('Spacer', () => {
     compare(input, expected);
   });
   
+  it('creates a spacer element for small screens with correct size', () => {
+    var input = '<spacer size-sm="10"></spacer>';
+    var expected = `
+      <table class="spacer hide-for-large">
+        <tbody>
+          <tr>
+            <td height="10px" style="font-size:10px;line-height:10px;">&#xA0;</td>
+          </tr>
+        </tbody>
+      </table>
+    `;
+
+    compare(input, expected);
+  });
+  
+  it('creates a spacer element for large screens with correct size', () => {
+    var input = '<spacer size-lg="20"></spacer>';
+    var expected = `
+      <table class="spacer show-for-large">
+        <tbody>
+          <tr>
+            <td height="20px" style="font-size:20px;line-height:20px;">&#xA0;</td>
+          </tr>
+        </tbody>
+      </table>
+    `;
+
+    compare(input, expected);
+  });
+  
+  it('creates a spacer element for small and large screens with correct sizes', () => {
+    var input = '<spacer size-sm="10" size-lg="20"></spacer>';
+    var expected = `
+      <table class="spacer hide-for-large">
+        <tbody>
+          <tr>
+            <td height="10px" style="font-size:10px;line-height:10px;">&#xA0;</td>
+          </tr>
+        </tbody>
+      </table>
+      <table class="spacer show-for-large">
+        <tbody>
+          <tr>
+            <td height="20px" style="font-size:20px;line-height:20px;">&#xA0;</td>
+          </tr>
+        </tbody>
+      </table>
+    `;
+
+    compare(input, expected);
+  });
+  
   it('copies classes to the final spacer HTML', () => {
     var input = '<spacer size="10" class="bgcolor"></spacer>';
     var expected = `