diff --git a/web/org.openbravo.retail.posterminal/css/obpos-main.css b/web/org.openbravo.retail.posterminal/css/obpos-main.css
--- a/web/org.openbravo.retail.posterminal/css/obpos-main.css
+++ b/web/org.openbravo.retail.posterminal/css/obpos-main.css
@@ -262,4 +262,135 @@
 
 .blackecolor {
   color: black;
+}
+
+
+.orderline-quantity {
+  float: left;
+  width: 55px;
+  text-align: right;
+}
+
+.orderline-price,
+.orderline-gross {
+  float: left;
+  width: 105px;
+  text-align: right;
+}
+
+.orderline-productname {
+  float: left;
+  width: calc(100% - 265px);  /* The same than calc(100% - 55px - 2 * 105px); */
+  padding: 0px;
+}
+
+.orderline-characteristicsDescription {
+  width: calc(100% - 210px);  /* The same than calc(100% - 2 * 105px); */
+  color:grey;
+  padding-left: 0%;
+  padding-top: 4px;
+  font-size: 14px;
+  clear: both;
+}
+
+.order-total-label {
+  float: left;
+  width: calc(100% - 265px);  /* The same than calc(100% - 55px - 2 * 105px); */
+}
+
+.order-total-qty {
+  float: left;
+  width: 55px;
+  text-align: right;
+  font-weight: bold;
+}
+
+.order-total-gross {
+  float: left;
+  width: 210px;
+  text-align: right;
+  font-weight: bold;
+}
+
+.order-tax-label {
+  float: left;
+  width: calc(100% - 210px);  /* The same than calc(100% - 2 * 105px); */
+}
+
+.order-tax-base,
+.order-tax-total {
+  float: left;
+  width: 105px;
+  text-align: right;
+}
+
+/*
+   Media query for dynamic 'unit price' and 'gross price' widths from 80px to 105px when
+   the viewport aspect ratio goes from 5:4 (1.25) to 3:2 (1.5) respectively in landscape mode and
+   from 10:16 (0.625) to 3:4 (0.75) respectively in portrait mode.
+   The product name is also adapted to fill the remaining space.
+*/
+
+@media all and (min-width: 701px) and (max-aspect-ratio: 150/100), (max-width: 700px) and (max-aspect-ratio: 3/4) {
+  .orderline-price,
+  .orderline-gross {
+    width: calc((25/79 * 100%) - 39px);
+  }
+
+  .orderline-productname {
+    width: calc((29/79 * 100%) + 23px);  /* The same than calc(100% - 55px - 2 * ((25/79 * 100%) - 39px)); */
+  }
+
+  .orderline-characteristicsDescription {
+    width: calc((29/79 * 100%) + 78px);  /* The same than calc(100% - 2 * ((25/79 * 100%) - 39px)); */
+  }
+
+  .order-total-label {
+    width: calc((29/79 * 100%) + 23px);  /* The same than calc(100% - 55px - 2 * ((25/79 * 100%) - 39px)); */
+  }
+
+  .order-total-gross {
+    width: calc((50/79 * 100%) - 78px);  /* The same than calc(2 * ((25/79 * 100%) - 39px)); */
+  }
+
+  .order-tax-label {
+    width: calc((29/79 * 100%) + 78px);  /* The same than calc(100% - 2 * ((25/79 * 100%) - 39px)); */
+  }
+
+  .order-tax-base,
+  .order-tax-total {
+    width: calc((25/79 * 100%) - 39px);
+  }
+}
+
+@media all and (min-width: 701px) and (max-aspect-ratio: 125/100), (max-width: 700px) and (max-aspect-ratio: 10/16) {
+  .orderline-price,
+  .orderline-gross {
+    width: 80px;
+  }
+
+  .orderline-productname {
+    width: calc(100% - 215px);  /* The same than calc(100% - 55px - 2 * 80px); */
+  }
+
+  .orderline-characteristicsDescription {
+    width: calc(100% - 160px);  /* The same than calc(100% - 2 * 80px); */
+  }
+
+  .order-total-label {
+    width: calc(100% - 215px);  /* The same than calc(100% - 55px - 2 * 80px); */
+  }
+
+  .order-total-gross {
+    width: 160px;
+  }
+
+  .order-tax-label {
+    width: calc(100% - 160px);  /* The same than calc(100% - 2 * 80px); */
+  }
+
+  .order-tax-base,
+  .order-tax-total {
+    width: 80px;
+  }
 }
\ No newline at end of file
diff --git a/web/org.openbravo.retail.posterminal/js/components/order.js b/web/org.openbravo.retail.posterminal/js/components/order.js
--- a/web/org.openbravo.retail.posterminal/js/components/order.js
+++ b/web/org.openbravo.retail.posterminal/js/components/order.js
@@ -241,13 +241,13 @@
   style: 'position: relative; padding: 10px; height: 35px',
   components: [{
     name: 'lblTotal',
-    style: 'float: left; width: 40%;'
+    classes: 'order-total-label'
   }, {
     name: 'totalqty',
-    style: 'float: left; width: 20%; text-align:right; font-weight:bold;'
+    classes: 'order-total-qty'
   }, {
     name: 'totalgross',
-    style: 'float: left; width: 40%; text-align:right; font-weight:bold;'
+    classes: 'order-total-gross'
   }, {
     style: 'clear: both;'
   }],
diff --git a/web/org.openbravo.retail.posterminal/js/components/renderorderline.js b/web/org.openbravo.retail.posterminal/js/components/renderorderline.js
--- a/web/org.openbravo.retail.posterminal/js/components/renderorderline.js
+++ b/web/org.openbravo.retail.posterminal/js/components/renderorderline.js
@@ -46,7 +46,7 @@
   }, {
     name: 'nameContainner',
     tag: 'div',
-    style: 'float: left;width: 40%; padding: 0px;',
+    classes: 'orderline-productname',
     components: [{
       name: 'serviceIcon',
       kind: 'Image',
@@ -57,19 +57,13 @@
     }]
   }, {
     name: 'quantity',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    classes: 'orderline-quantity'
   }, {
     name: 'price',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    classes: 'orderline-price'
   }, {
     name: 'gross',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    classes: 'orderline-gross'
   }, {
     style: 'clear: both;'
   }],
@@ -98,9 +92,7 @@
         components: [{
           name: 'characteristicsDescription',
           content: OB.UTIL.getCharacteristicValues(this.model.get('product').get('characteristicDescription')),
-          attributes: {
-            style: 'width: 60.1%; color:grey; padding-left: 0%; clear: both; '
-          }
+          classes: 'orderline-characteristicsDescription'
         }, {
           style: 'clear: both;'
         }]
@@ -335,19 +327,13 @@
   },
   components: [{
     name: 'tax',
-    attributes: {
-      style: 'float: left; width: 60%;'
-    }
+    classes: 'order-tax-label'
   }, {
     name: 'base',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    classes: 'order-tax-base'
   }, {
     name: 'totaltax',
-    attributes: {
-      style: 'float: left; width: 20%; text-align: right;'
-    }
+    classes: 'order-tax-total'
   }, {
     style: 'clear: both;'
   }],