diff --git a/src/sunstone/public/js/plugins/dashboard-tab.js b/src/sunstone/public/js/plugins/dashboard-tab.js
index d8e20f4bab..e0689a8a52 100644
--- a/src/sunstone/public/js/plugins/dashboard-tab.js
+++ b/src/sunstone/public/js/plugins/dashboard-tab.js
@@ -28,13 +28,13 @@ var widgets = {
   "storage" : '<fieldset>\
         <legend class="span-dashboard"><i class="fa fa-upload"></i> '+tr("Storage")+'</legend>\
         <div class="row totals-info">\
-            <div class="large-6 columns text-right">\
+            <div class="small-6 large-6 columns text-right">\
               <h4 class="subheader">\
               <span class="total_images subheader"/><br>\
               <span class="size_images subheader"/>\
               </h4>\
             </div>\
-            <div class="large-6 columns text-left">\
+            <div class="small-6 large-6 columns text-left">\
               <h4 class="subheader">\
               <small>'+tr("IMAGES")+'</small><br>\
               <small>'+tr("USED")+'</small>\
@@ -45,13 +45,13 @@ var widgets = {
   "users" : '<fieldset>\
         <legend class="span-dashboard"><i class="fa fa-user"></i> '+tr("Users")+'</legend>\
         <div class="row totals-info">\
-            <div class="large-6 columns text-right">\
+            <div class="small-6 large-6 columns text-right">\
               <h4 class="subheader">\
               <span class="subheader total_users"/><br>\
               <span class="subheader total_groups"/>\
               </h4>\
             </div>\
-            <div class="large-6 columns text-left">\
+            <div class="small-6 large-6 columns text-left">\
               <h4 class="subheader">\
               <small>'+tr("USERS")+'</small><br>\
               <small>'+tr("GROUPS")+'</small>\
@@ -62,13 +62,13 @@ var widgets = {
   "network" : '<fieldset>\
         <legend class="span-dashboard"><i class="fa fa-sitemap"></i> '+tr("Network")+'</legend>\
         <div class="row totals-info">\
-            <div class="large-6 columns text-right">\
+            <div class="small-6 large-6 columns text-right">\
               <h4 class="subheader">\
               <span class="total_vnets subheader"/><br>\
               <span class="addresses_vnets subheader"/>\
               </h4>\
             </div>\
-            <div class="large-6 columns text-left">\
+            <div class="small-6 large-6 columns text-left">\
               <h4 class="subheader">\
               <small>'+tr("VNETS")+'</small><br>\
               <small>'+tr("USED IPs")+'</small>\
@@ -79,8 +79,8 @@ var widgets = {
   "hosts" : '<fieldset class="dashboard-panel">\
         <legend class="span-dashboard"><i class="fa fa-hdd-o"></i> '+tr("Hosts")+'</legend>\
         <div class="row  totals-info">\
-          <div class="large-3 columns centered">\
-            <div class="large-6 columns text-right">\
+          <div class="small-3 large-3 columns centered">\
+            <div class="small-6 large-6 columns text-right">\
               <h4 class="subheader">\
                 <span class="total_hosts subheader"/><br>\
                 <span class="on_hosts subheader success-color"/><br>\
@@ -88,7 +88,7 @@ var widgets = {
                 <span class="error_hosts subheader alert-color"/><br>\
               </h4>\
             </div>\
-            <div class="large-6 columns text-left">\
+            <div class="small-6 large-6 columns text-left">\
               <h4 class="subheader">\
                 <small>'+tr("TOTAL")+'</small><br>\
                 <small class="success-color">'+tr("ON")+'</small><br>\
@@ -97,26 +97,26 @@ var widgets = {
               </h4>\
             </div>\
           </div>\
-          <div class="large-9 columns">\
+          <div class="small-9 large-9 columns">\
             <div class="row graph_legend text-left">\
-              <div class="large-4 columns">\
+              <div class="small-4 large-4 columns">\
                   <h4 class="subheader text-center"><small>'+tr("CPU")+'</small></h4>\
               </div>\
-              <div class="large-4 columns">\
+              <div class="small-4 large-4 columns">\
                 <span class="label allocated radius">'+tr("Allocated")+'</span>&emsp;\
                 <span class="label real radius">'+tr("Real")+'</span>&emsp;\
                 <span class="label total radius">'+tr("Total")+'</span>\
               </div>\
-              <div class="large-4 columns">\
+              <div class="small-4 large-4 columns">\
                   <h4 class="subheader"><small>'+tr("MEMORY")+'</small></h4>\
               </div>\
             </div>\
             <div class="row">\
-              <div class="large-6 columns">\
+              <div class="small-6 large-6 columns">\
                   <div class="large-12 columns centered graph" id="dash_host_cpu_graph" style="height: 100px;">\
                   </div>\
               </div>\
-              <div class="large-6 columns">\
+              <div class="small-6 large-6 columns">\
                   <div class="large-12 columns centered graph" id="dash_host_mem_graph" style="height: 100px;">\
                   </div>\
               </div>\
@@ -127,8 +127,8 @@ var widgets = {
   "vms" : '<fieldset class="dashboard-panel">\
         <legend class="span-dashboard"><i class="fa fa-cloud"></i> '+tr("Virtual Machines")+'</legend>\
         <div class="row totals-info">\
-          <div class="large-3 columns">\
-            <div class="large-6 columns text-right">\
+          <div class="small-3 large-3 columns">\
+            <div class="small-6 large-6 columns text-right">\
               <h4 class="subheader">\
               <span class="subheader total_vms"/><br>\
               <span class="subheader active_vms success-color"/><br>\
@@ -136,7 +136,7 @@ var widgets = {
               <span class="subheader failed_vms alert-color"/>\
               </h4>\
             </div>\
-            <div class="large-6 columns text-left">\
+            <div class="small-6 large-6 columns text-left">\
               <h4 class="subheader">\
               <small>'+tr("TOTAL")+'</small><br>\
               <small class="success-color">'+tr("ACTIVE")+'</small><br>\
@@ -145,21 +145,21 @@ var widgets = {
               </h4>\
             </div>\
           </div>\
-          <div class="large-9 columns">\
+          <div class="small-9 large-9 columns">\
             <div class="row graph_legend text-center">\
-              <div class="large-6 columns">\
+              <div class="small-6 large-6 columns">\
               <h4 class="subheader"><small>'+tr("NET DOWNLOAD SPEED")+'</small></h4>\
               </div>\
-              <div class="large-6 columns">\
+              <div class="small-6 large-6 columns">\
               <h4 class="subheader"><small>'+tr("NET UPLOAD SPEED")+'</small></h4>\
               </div>\
             </div>\
             <div class="row">\
-              <div class="large-6 columns">\
+              <div class="small-6 large-6 columns">\
               <div class="large-12 columns centered graph" id="dash_vm_net_rx_graph"  style="height: 100px;">\
               </div>\
               </div>\
-              <div class="large-6 columns">\
+              <div class="small-6 large-6 columns">\
               <div class="large-12 columns centered graph" id="dash_vm_net_tx_graph" style="height: 100px;">\
               </div>\
               </div>\
@@ -188,12 +188,12 @@ $(document).ready(function(){
     $dashboard = $('#dashboard-tab', main_tabs_context);
 
     $.each(Config.dashboardWidgets('widgets_three_per_row'), function(id, widget){
-      var html = '<div class="large-4 columns">'+widgets[widget]+'</div>';
+      var html = '<div class="small-4 large-4 columns">'+widgets[widget]+'</div>';
       $('#three_per_row', $dashboard).append(html);
     })
 
     $.each(Config.dashboardWidgets('widgets_two_per_row'), function(id, widget){
-      var html = '<div class="large-6 columns">'+widgets[widget]+'</div>';
+      var html = '<div class="small-6 large-6 columns">'+widgets[widget]+'</div>';
       $('#two_per_row', $dashboard).append(html);
     })
 
diff --git a/src/sunstone/public/js/sunstone.js b/src/sunstone/public/js/sunstone.js
index 27cb60a4a9..2399f03871 100644
--- a/src/sunstone/public/js/sunstone.js
+++ b/src/sunstone/public/js/sunstone.js
@@ -483,11 +483,11 @@ function insertTab(tab_name){
 */
         if (tab_info.buttons) {
             tab_content_str += '<div class="row">\
-              <div class="large-9 columns">\
+              <div class="small-9 large-9 columns">\
                 <div class="action_blocks">\
                 </div>\
               </div>\
-              <div class="large-3 columns only-right-list">'
+              <div class="small-3 large-3 columns only-right-list">'
 
             if (tab_info.search_input) {
                 tab_content_str += tab_info.search_input;
diff --git a/src/sunstone/views/index.erb b/src/sunstone/views/index.erb
index 89bae2bb65..ce4fc40c79 100644
--- a/src/sunstone/views/index.erb
+++ b/src/sunstone/views/index.erb
@@ -71,7 +71,7 @@
   </head>
   <body class="antialiased row">
     <div class="row collapse" style="height:100%;">
-      <div class="large-2 columns left-content">
+      <div class="small-2 large-2 columns left-content">
         <div class="row left-header">
           <div class="large-12 columns">
             <img src="<%= view['small_logo'] %>"/>
@@ -82,7 +82,7 @@
         </div>
       </div>
 
-      <div class="large-10 columns right-content">
+      <div class="small-10 large-10 columns right-content">
         <div class="row user-zone-container"><div class="user-zone-info"></div></div>
         <div class="row right-header">
         </div>