From c041b87ab03b23f7480a4765190d188134d7af5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Mart=C3=ADn?= <cmartin@opennebula.org>
Date: Fri, 4 Sep 2015 12:51:43 +0200
Subject: [PATCH] Feature #3748: Layout improvements for medium screens

---
 .../form-panels/create/wizard.hbs             | 38 +++++++++----------
 .../files-tab/form-panels/create/wizard.hbs   |  4 +-
 .../hosts-tab/form-panels/create/wizard.hbs   | 22 +++++------
 .../images-tab/form-panels/create/wizard.hbs  |  8 ++--
 .../form-panels/create/wizard.hbs             | 12 +++---
 .../form-panels/instantiate/html.hbs          |  4 +-
 .../utils/role-tab/html.hbs                   | 22 +++++------
 .../app/tabs/support-tab/panels/info/html.hbs |  4 +-
 .../public/app/tabs/support-tab/subheader.hbs |  8 ++--
 .../vnets-tab/form-panels/create/wizard.hbs   | 28 +++++++-------
 .../app/tabs/vnets-tab/utils/ar-tab/html.hbs  |  8 ++--
 11 files changed, 79 insertions(+), 79 deletions(-)

diff --git a/src/sunstone/public/app/tabs/datastores-tab/form-panels/create/wizard.hbs b/src/sunstone/public/app/tabs/datastores-tab/form-panels/create/wizard.hbs
index 38f2f5b457..16a07b07b2 100644
--- a/src/sunstone/public/app/tabs/datastores-tab/form-panels/create/wizard.hbs
+++ b/src/sunstone/public/app/tabs/datastores-tab/form-panels/create/wizard.hbs
@@ -1,12 +1,12 @@
 <form data-abide="ajax" id="{{formPanelId}}Wizard" class="custom creation">
   <div class="row">
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="name" >{{tr "Name"}}:</label>
       <input required type="text" name="name" id="name"/>
     </div>
   </div>
   <div class="row">
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="presets">{{tr "Presets"}}</label>
       <select id="presets" name="presets">
         <option value="fs">{{tr "Filesystem"}}</option>
@@ -19,7 +19,7 @@
         <option value="custom">{{tr "Custom"}}</option>
       </select>
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="cluster">{{tr "Cluster"}}</label>
       <div id="cluster_id" name="cluster_id"></div>
     </div>
@@ -43,7 +43,7 @@
     <div class="large-12 columns">
       <fieldset>
         <legend>{{tr "Managers"}}</legend>
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label for="ds_mad">{{tr "Datastore"}}</label>
           <select id="ds_mad" name="ds_mad">
             <option value="fs">{{tr "Filesystem"}}</option>
@@ -59,7 +59,7 @@
             <input type="text" name="ds_tab_custom_ds_mad" />
           </div>
         </div>
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label for="tm_mad">{{tr "Transfer"}}:</label>
           <select id="tm_mad" name="tm_mad">
             <option value="shared">{{tr "Shared"}}</option>
@@ -81,7 +81,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="disk_type">{{tr "Disk type"}}:</label>
       <select id="disk_type" name="disk_type">
         <option value="file">{{tr "File"}}</option>
@@ -110,7 +110,7 @@
       </label>
       <input type="text" name="restricted_dirs" id="restricted_dirs" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="base_path">
         {{tr "Base Path"}}
         <span class="tip">
@@ -119,7 +119,7 @@
       </label>
       <input type="text" name="base_path" id="base_path" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="limit_transfer_bw">
         {{tr "Transfer BW Limit"}}
         <span class="tip">
@@ -128,7 +128,7 @@
       </label>
       <input type="text" name="limit_transfer_bw" id="limit_transfer_bw" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="limit_mb">
         {{tr "Limit"}}
         <span class="tip">
@@ -156,7 +156,7 @@
       </label>
       <input type="text" name="bridge_list" id="bridge_list" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="ds_tmp_dir">
         {{tr "DS Tmp Dir"}}
         <span class="tip">
@@ -165,11 +165,11 @@
       </label>
       <input type="text" name="ds_tmp_dir" id="ds_tmp_dir" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="vg_name">{{tr "Volume Group Name"}}</label>
       <input type="text" name="vg_name" id="vg_name" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="gluster_host">
         {{tr "Gluster Host"}}
         <span class="tip">
@@ -178,14 +178,14 @@
       </label>
       <input type="text" name="gluster_host" id="gluster_host" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="gluster_volume">
         {{tr "Gluster Volume"}}
         <span class="tip">{{tr "Gluster volume to use for the datastore"}}</span>
       </label>
       <input type="text" name="gluster_volume" id="gluster_volume" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="pool_name">
         {{tr "Pool Name"}}
         <span class="tip">
@@ -194,7 +194,7 @@
       </label>
       <input type="text" name="pool_name" id="pool_name" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="ceph_host">
         {{tr "Ceph Host"}}
         <span class="tip">
@@ -203,7 +203,7 @@
       </label>
       <input type="text" name="ceph_host" id="ceph_host" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="ceph_user">
         {{tr "Ceph User"}}
         <span class="tip">
@@ -212,7 +212,7 @@
       </label>
       <input type="text" name="ceph_user" id="ceph_user" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="ceph_secret">
         {{tr "Ceph Secret"}}
         <span class="tip">
@@ -221,7 +221,7 @@
       </label>
       <input type="text" name="ceph_secret" id="ceph_secret" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label class="fs" for="staging_dir">
         {{tr "Staging Dir"}}
         <span class="tip">
@@ -233,7 +233,7 @@
       </label>
       <input type="text" name="staging_dir" id="staging_dir" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="rbd_format">
         {{tr "RBD Format"}}
         <span class="tip">
diff --git a/src/sunstone/public/app/tabs/files-tab/form-panels/create/wizard.hbs b/src/sunstone/public/app/tabs/files-tab/form-panels/create/wizard.hbs
index 4dff8e384c..3bf29b46cd 100644
--- a/src/sunstone/public/app/tabs/files-tab/form-panels/create/wizard.hbs
+++ b/src/sunstone/public/app/tabs/files-tab/form-panels/create/wizard.hbs
@@ -20,7 +20,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="large-4 columns">
+    <div class="medium-4 columns">
       <label for="file_type">
         {{tr "Type"}}
         <span class="tip">
@@ -39,7 +39,7 @@
         <option value="RAMDISK">{{tr "Ramdisk"}}</option>
       </select>
     </div>
-    <div class="large-8 columns">
+    <div class="medium-8 columns">
       <label for="file_datastore">
         {{tr "Datastore"}}
         <span class="tip">{{tr "Select the datastore for this file"}}</span>
diff --git a/src/sunstone/public/app/tabs/hosts-tab/form-panels/create/wizard.hbs b/src/sunstone/public/app/tabs/hosts-tab/form-panels/create/wizard.hbs
index d01767a2e4..1bbab564fa 100644
--- a/src/sunstone/public/app/tabs/hosts-tab/form-panels/create/wizard.hbs
+++ b/src/sunstone/public/app/tabs/hosts-tab/form-panels/create/wizard.hbs
@@ -1,6 +1,6 @@
 <form data-abide="ajax" id="{{formPanelId}}Wizard" class="custom creation">
   <div class="row">
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="host_type">{{tr "Type"}}</label>
       <select id="host_type_mad" name="host_type">
         <option value="kvm">{{tr "KVM"}}</option>
@@ -14,19 +14,19 @@
         <option value="custom">{{tr "Custom"}}</option>
       </select>
     </div>
-    <div class="large-6 columns" id="cluster_select">
+    <div class="medium-6 columns" id="cluster_select">
       <label for="host_cluster_id">{{tr "Cluster"}}</label>
       <div id="host_cluster_id" name="host_cluster_id"></div>
     </div>
   </div>
   <div class="row">
-    <div class="large-6 columns" id="name_container">
+    <div class="medium-6 columns" id="name_container">
       <label for="name">{{tr "Hostname"}}</label>
       <input type="text" name="name" id="name" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <div class="manager clear row" id="vnm_mads">
-        <div class="large-12 columns">
+        <div class="medium-12 columns">
           <label for="vn">{{tr "Networking"}}</label>
           <select id="vnm_mad" name="vn">
             <option value="dummy">{{tr "Default (dummy)"}}</option>
@@ -50,7 +50,7 @@
     <fieldset>
       <legend>{{tr "Drivers"}}</legend>
       <div class="row">
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <div class="manager clear row" id="vmm_mads">
             <div class="large-12 columns">
               <label for="vmm">{{tr "Virtualization"}}</label>
@@ -72,7 +72,7 @@
             </div>
           </div>
         </div>
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <div class="manager clear row" id="im_mads">
             <div class="large-12 columns">
               <label for="im">{{tr "Information"}}</label>
@@ -101,21 +101,21 @@
     <fieldset>
       <legend>{{tr "vCenter"}}</legend>
       <div class="row">
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label for="vcenter_user">{{tr "User"}}</label>
           <input type="text" name="vcenter_user" id="vcenter_user" />
         </div>
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label for="vcenter_host">{{tr "Hostname"}}</label>
           <input type="text" name="vcenter_host" id="vcenter_host" />
         </div>
       </div>
       <div class="row">
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label for="vcenter_password">{{tr "Password"}}</label>
           <input type="password" name="vcenter_password" id="vcenter_password" />
         </div>
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <br>
           <a class="button radius small right" id="get_vcenter_clusters">{{tr "Get vCenter Clusters"}}</a>
         </div>
diff --git a/src/sunstone/public/app/tabs/images-tab/form-panels/create/wizard.hbs b/src/sunstone/public/app/tabs/images-tab/form-panels/create/wizard.hbs
index e10cf3b887..7d23bd073f 100644
--- a/src/sunstone/public/app/tabs/images-tab/form-panels/create/wizard.hbs
+++ b/src/sunstone/public/app/tabs/images-tab/form-panels/create/wizard.hbs
@@ -20,7 +20,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="large-4 columns">
+    <div class="medium-4 columns">
       <label for="img_type">
         {{tr "Type"}}
         <span class="tip">
@@ -42,7 +42,7 @@
         <option value="DATABLOCK">{{tr "DATABLOCK"}}</option>
       </select>
     </div>
-    <div class="large-8 columns">
+    <div class="medium-8 columns">
       <label for="img_datastore">
         {{tr "Datastore"}}
         <span class="tip">{{tr "Select the datastore for this image"}}</span>
@@ -93,14 +93,14 @@
       </div>
     </div>
     <div class="img_size row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="img_size">
           {{tr "Size"}}
           <span class="tip">{{tr "Size of the datablock in MB."}}</span>
         </label>
         <input type="text" name="img_size" id="img_size" />
       </div>
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="img_fstype">
           {{tr "FS type"}}
           <span class="tip">
diff --git a/src/sunstone/public/app/tabs/oneflow-templates-tab/form-panels/create/wizard.hbs b/src/sunstone/public/app/tabs/oneflow-templates-tab/form-panels/create/wizard.hbs
index 93eb55e1da..2a974fbd79 100644
--- a/src/sunstone/public/app/tabs/oneflow-templates-tab/form-panels/create/wizard.hbs
+++ b/src/sunstone/public/app/tabs/oneflow-templates-tab/form-panels/create/wizard.hbs
@@ -1,13 +1,13 @@
 <form data-abide="ajax" id="{{formPanelId}}Wizard" class="custom creation">
   <div class="row">
-    <div class="service_template_param st_man large-6 columns">
+    <div class="service_template_param st_man medium-6 columns">
       <label for="service_name">
         {{tr "Name"}}
         <span class="tip">{{tr "Name for this template"}}</span>
       </label>
       <input type="text" id="service_name" name="service_name" required/>
     </div>
-    <div class="service_template_param st_man large-6 columns">
+    <div class="service_template_param st_man medium-6 columns">
     </div>
   </div>
   <div class="row">
@@ -37,7 +37,7 @@
           <tfoot>
             <tr>
               <td colspan="3">
-                <a type="button" class="add_service_network button small large-12 secondary radius"><i class="fa fa-plus"></i>{{tr "Add another Network"}}</a>
+                <a type="button" class="add_service_network button small small-12 secondary radius"><i class="fa fa-plus"></i>{{tr "Add another Network"}}</a>
               </td>
             </tr>
           </tfoot>
@@ -49,7 +49,7 @@
   <br>
   {{#advancedSection (tr "Advanced Service Parameters") }}
   <div class="row">
-    <div class="service_template_param st_man large-6 columns">
+    <div class="service_template_param st_man medium-6 columns">
       <label for="deployment">
         {{tr "Strategy"}}
         <span class="tip">{{tr "Straight strategy will instantiate each role in order: parents role will be deployed before their children. None strategy will instantiate the roles regardless of their relationships."}}</span>
@@ -59,7 +59,7 @@
         <option value="none">{{tr "None"}}</option>
       </select>
     </div>
-    <div class="service_template_param st_man large-6 columns">
+    <div class="service_template_param st_man medium-6 columns">
       <label for="shutdown_action_service">
         {{tr "Shutdown action"}}
         <span class="tip">{{tr "VM shutdown action: 'shutdown' or 'shutdown-hard'."}}</span>
@@ -72,7 +72,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="service_template_param st_man large-6 columns">
+    <div class="service_template_param st_man medium-6 columns">
       <input type="checkbox" name="ready_status_gate" id="ready_status_gate"/>
       <label for="ready_status_gate">
         {{tr "Wait for VMs to report that they are READY"}}
diff --git a/src/sunstone/public/app/tabs/oneflow-templates-tab/form-panels/instantiate/html.hbs b/src/sunstone/public/app/tabs/oneflow-templates-tab/form-panels/instantiate/html.hbs
index dc096388e4..265a938e40 100644
--- a/src/sunstone/public/app/tabs/oneflow-templates-tab/form-panels/instantiate/html.hbs
+++ b/src/sunstone/public/app/tabs/oneflow-templates-tab/form-panels/instantiate/html.hbs
@@ -1,12 +1,12 @@
 <form data-abide="ajax" id="{{formPanelId}}Wizard" class="custom creation">
   <div class="row">
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="service_name">{{tr "Service Name"}}
         <span class="tip">{{tr "Defaults to template name when emtpy. You can use the wildcard &#37;i. When creating several Services, &#37;i will be replaced with a different number starting from 0 in each of them"}}.</span>
       </label>
       <input type="text" name="service_name" id="service_name" />
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="service_n_times">{{tr "Number of instances"}}
         <span class="tip">{{tr "Number of Services that will be created using this template"}}.</span>
       </label>
diff --git a/src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab/html.hbs b/src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab/html.hbs
index 98c413780e..eac9ebf4b5 100644
--- a/src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab/html.hbs
+++ b/src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab/html.hbs
@@ -1,11 +1,11 @@
 <div class="row">
-  <div class="service_template_param service_role st_man large-6 columns">
+  <div class="service_template_param service_role st_man medium-6 columns">
     <label for="name">{{tr "Role Name"}}
       <span class="tip">{{tr "Name of the role"}}</span>
     </label>
     <input type="text" id="role_name" name="name" required/>
   </div>
-  <div class="service_template_param service_role large-2 columns end">
+  <div class="service_template_param service_role medium-2 columns end">
     <label for="cardinality">{{tr "VMs"}}
       <span class="tip">{{tr "Number of VMs to instantiate with this role"}}</span>
     </label>
@@ -23,7 +23,7 @@
   </div>
 </div>
 <div class="row">
-  <div class="service_template_param service_role large-6 columns">
+  <div class="service_template_param service_role medium-6 columns">
     <table class="networks_role extended_table dataTable">
       <thead>
         <tr>
@@ -36,7 +36,7 @@
       </tbody>
     </table>
   </div>
-  <div class="service_template_param service_role large-6 columns">
+  <div class="service_template_param service_role medium-6 columns">
     <table class="parent_roles extended_table dataTable">
       <thead>
         <tr>
@@ -55,19 +55,19 @@
   <div class="large-12 columns elasticity_accordion">
     {{#advancedSection (tr "Role Elasticity") }}
     <div class="row">
-      <div class="large-4 columns">
+      <div class="medium-4 columns">
         <label for="min_vms">{{tr "Min VMs"}}
           <span class="tip">{{tr "Minimum number of VMs for elasticity adjustments"}}</span>
         </label>
         <input type="text" id="min_vms" name="min_vms" value="" />
       </div>
-      <div class="large-4 columns">
+      <div class="medium-4 columns">
         <label for="max_vms">{{tr "Max VMs"}}
           <span class="tip">{{tr "Maximum number of VMs for elasticity adjustments"}}</span>
         </label>
         <input type="text" id="max_vms" name="max_vms" value="" />
       </div>
-      <div class="service_template_param service_role large-4 columns">
+      <div class="service_template_param service_role medium-4 columns">
         <label for="cooldown">{{tr "Cooldown"}}
           <span class="tip">{{tr "Cooldown time after an elasticity operation (secs)"}}</span>
         </label>
@@ -117,7 +117,7 @@
           <tfoot>
             <tr>
               <td colspan="8">
-                <a type="button" class="button small radius right" id="tf_btn_elas_policies"><i class="fa fa-plus"></i> {{tr "Add another policy"}}</a>
+                <a type="button" class="button small radius secondary small-12" id="tf_btn_elas_policies"><i class="fa fa-plus"></i> {{tr "Add another policy"}}</a>
               </td>
             </tr>
           </tfoot>
@@ -164,7 +164,7 @@
           <tfoot>
             <tr>
               <td colspan="6">
-                <a type="button" class="button small radius right" id="tf_btn_sche_policies"><i class="fa fa-plus"></i> {{tr "Add another policy"}}</a>
+                <a type="button" class="button small radius secondary small-12" id="tf_btn_sche_policies"><i class="fa fa-plus"></i> {{tr "Add another policy"}}</a>
               </td>
             </tr>
           </tfoot>
@@ -179,7 +179,7 @@
   <div class="large-12 columns advanced_role_accordion">
     {{#advancedSection (tr "Advanced Role Parameters") }}
     <div class="row">
-      <div class="service_template_param service_role large-6 columns">
+      <div class="service_template_param service_role medium-6 columns">
         <label for="shutdown_action_role">{{tr "Shutdown action"}}
           <span class="tip">{{tr "VM shutdown action: 'shutdown' or 'shutdown-hard'. If it is not set, the one set for the Service will be used"}}</span>
         </label>
@@ -189,7 +189,7 @@
           <option value="shutdown-hard">{{tr "Shutdown hard"}}</option>
         </select>
       </div>
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
       </div>
     </div>
     <div class="row">
diff --git a/src/sunstone/public/app/tabs/support-tab/panels/info/html.hbs b/src/sunstone/public/app/tabs/support-tab/panels/info/html.hbs
index 85206063bf..3018ff0fa9 100644
--- a/src/sunstone/public/app/tabs/support-tab/panels/info/html.hbs
+++ b/src/sunstone/public/app/tabs/support-tab/panels/info/html.hbs
@@ -1,11 +1,11 @@
 <div class="row">
-  <div class="large-6 columns">
+  <div class="medium-6 columns">
     <h5>{{element.subject}}</h5>
     <p class="subheader" style="font-size: 14px;">
       {{{htmlDecode element.html_description}}}
     </p>
   </div>
-  <div class="large-6 columns">
+  <div class="medium-6 columns">
     <table id="info_marketplace_table" class="dataTable">
       <thead>
         <tr>
diff --git a/src/sunstone/public/app/tabs/support-tab/subheader.hbs b/src/sunstone/public/app/tabs/support-tab/subheader.hbs
index e1cce970cb..5b85c824d6 100644
--- a/src/sunstone/public/app/tabs/support-tab/subheader.hbs
+++ b/src/sunstone/public/app/tabs/support-tab/subheader.hbs
@@ -1,5 +1,5 @@
 <div class="row text-left support_connect">
-  <div class="large-6 columns" style="font-">
+  <div class="medium-6 columns" style="font-">
     <p>The Support Subscription provides expert integration and production support on supported platforms and include:</p>
     <ul class="fa-ul" style="font-size: 14px;">
       <li><i class="fa-li fa fa-check"></i>Problem diagnosis, resolution and bug fixing</li>
@@ -11,7 +11,7 @@
     </ul>
     <p>For more info on support subcriptions, <a href="http://opennebula.systems/support/" target="_blank">click here</a></p>
   </div>
-  <div class="large-6 columns" style="padding: 0px 50px;">
+  <div class="medium-6 columns" style="padding: 0px 50px;">
     <fieldset>
       <legend>Commercial Support</legend>
       <form id="support_credentials_form">
@@ -43,7 +43,7 @@
 </div>
 <br>
 <div class="row">
-  <div class="large-6 columns">
+  <div class="medium-6 columns">
     <a href="http://docs.opennebula.org/4.12/" target="_blank">
       <span class="fa-stack fa-2x" style="color: #cfcfcf;">
        <i class="fa fa-circle fa-stack-2x"></i>
@@ -53,7 +53,7 @@
      Documentation
    </a>
  </div>
- <div class="large-6 columns">
+ <div class="medium-6 columns">
   <a href="http://opennebula.org/support/community/" target="_blank">
     <span class="fa-stack fa-2x" style="color: #cfcfcf;">
      <i class="fa fa-circle fa-stack-2x"></i>
diff --git a/src/sunstone/public/app/tabs/vnets-tab/form-panels/create/wizard.hbs b/src/sunstone/public/app/tabs/vnets-tab/form-panels/create/wizard.hbs
index daf8f95de4..e49cdf056d 100644
--- a/src/sunstone/public/app/tabs/vnets-tab/form-panels/create/wizard.hbs
+++ b/src/sunstone/public/app/tabs/vnets-tab/form-panels/create/wizard.hbs
@@ -28,7 +28,7 @@
     <div id="vnet_create_tabs_content" class="tabs-content">
       <div class="content active" id="vnetCreateGeneralTab">
         <div class="row">
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <label for="name" >
               {{tr "Name"}}:
               <span class="tip">
@@ -39,7 +39,7 @@
           </div>
         </div>
         <div class="row">
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <label for="DESCRIPTION" >
               {{tr "Description"}}:
               <span class="tip">{{tr "Description of the Virtual Network"}}</span>
@@ -50,7 +50,7 @@
       </div>
       <div class="content" id="vnetCreateBridgeTab">
         <div class="row">
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <label for="bridge">
               {{tr "Bridge"}}:
               <span class="tip">
@@ -61,7 +61,7 @@
           </div>
         </div>
         <div class="row">
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <label for="network_mode">
               {{tr "Network model"}}:
               <span class="tip">
@@ -122,9 +122,9 @@
           </div>
         </div>
         <div class="row">
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <div class="row">
-              <div class="large-6 columns">
+              <div class="medium-6 columns">
                 <label for="vlan">
                   {{tr "VLAN"}}:
                   <span class="tip">
@@ -136,7 +136,7 @@
                   <option value="NO">{{tr "No"}}</option>
                 </select>
               </div>
-              <div class="large-6 columns">
+              <div class="medium-6 columns">
                 <label for="vlan_id">
                   {{tr "VLAN ID"}}:
                   <span class="tip">{{tr "Optional: Set a specific VLAN id"}}</span>
@@ -145,7 +145,7 @@
               </div>
             </div>
           </div>
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <div class="row">
               <div class="large-12 columns">
                 <label for="phydev">
@@ -160,7 +160,7 @@
           </div>
         </div>
         <div class="row">
-          <div class="large-3 columns">
+          <div class="medium-3 columns">
             <label for="mtu">
               {{tr "MTU"}}:
               <span class="tip">
@@ -207,14 +207,14 @@
       </div>
       <div class="content" id="vnetCreateContextTab">
         <div class="row">
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <label for="net_address">
               {{tr "Network address"}}:
               <span class="tip">{{tr "Base network address. For example, 192.168.1.0"}}</span>
             </label>
             <input type="text" wizard_field="NETWORK_ADDRESS" name="net_address" id="net_address" />
           </div>
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <label for="net_mask">
               {{tr "Network mask"}}:
               <span class="tip">{{tr "Network mask. For example, 255.255.255.0"}}</span>
@@ -223,14 +223,14 @@
           </div>
         </div>
         <div class="row">
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <label for="net_gateway">
               {{tr "Gateway"}}:
               <span class="tip">{{tr "Router for this network. Leave empty if the network is not routable"}}</span>
             </label>
             <input type="text" wizard_field="GATEWAY" name="net_gateway" id="net_gateway" />
           </div>
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <label for="net_gateway6">
               {{tr "IPv6 Gateway"}}:
               <span class="tip">{{tr "IPv6 Router for this network"}}</span>
@@ -239,7 +239,7 @@
           </div>
         </div>
         <div class="row">
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <label for="net_dns">
               {{tr "DNS"}}:
               <span class="tip">{{tr "Specific DNS for this network"}}</span>
diff --git a/src/sunstone/public/app/tabs/vnets-tab/utils/ar-tab/html.hbs b/src/sunstone/public/app/tabs/vnets-tab/utils/ar-tab/html.hbs
index 6924443ddf..a7f9ed28cf 100644
--- a/src/sunstone/public/app/tabs/vnets-tab/utils/ar-tab/html.hbs
+++ b/src/sunstone/public/app/tabs/vnets-tab/utils/ar-tab/html.hbs
@@ -7,7 +7,7 @@
   </div>
 </div>
 <div class="row">
-  <div class="large-6 columns">
+  <div class="medium-6 columns">
     <div class="row collapse ar_input type_ip4 type_ip4_6">
       <label for="{{str_ar_tab_id}}_ip_start">{{tr "IP Start"}}:
         <span class="tip">{{tr "First IP address"}}</span>
@@ -21,7 +21,7 @@
       <input wizard_field="MAC" type="text" name="MAC" id="{{str_ar_tab_id}}_mac_start" />
     </div>
   </div>
-  <div class="large-6 columns ar_input type_ip4 type_ip4_6 type_ip6 type_ether">
+  <div class="medium-6 columns ar_input type_ip4 type_ip4_6 type_ip6 type_ether">
     <label for="{{str_ar_tab_id}}_size">{{tr "Size"}}:
       <span class="tip">{{tr "Number of addresses in the range"}}</span>
     </label>
@@ -29,13 +29,13 @@
   </div>
 </div>
 <div class="row">
-  <div class="large-6 columns ar_input type_ip4_6 type_ip6">
+  <div class="medium-6 columns ar_input type_ip4_6 type_ip6">
     <label for="{{str_ar_tab_id}}_global_prefix">{{tr "Global prefix"}}:
       <span class="tip">{{tr "IPv6 global address prefix to create leases"}}</span>
     </label>
     <input wizard_field="GLOBAL_PREFIX" type="text" name="GLOBAL_PREFIX" id="{{str_ar_tab_id}}_global_prefix"/>
   </div>
-  <div class="large-6 columns ar_input type_ip4_6 type_ip6">
+  <div class="medium-6 columns ar_input type_ip4_6 type_ip6">
     <label for="{{str_ar_tab_id}}_ula_prefix">{{tr "ULA prefix"}}:
       <span class="tip">{{tr "IPv6 unique local address (ULA) prefix to create leases"}}</span>
     </label>