diff --git a/resources/js/components/pedidos/CategoriasContainer.vue b/resources/js/components/pedidos/CategoriasContainer.vue
index a996010..ea840cc 100644
--- a/resources/js/components/pedidos/CategoriasContainer.vue
+++ b/resources/js/components/pedidos/CategoriasContainer.vue
@@ -1,15 +1,16 @@
 <template>
     <div v-show="visible" class="column">
-        <div class="columns is-multiline is-mobile"
+        <div ref="categorias"
+             class="columns is-multiline is-mobile"
             :class="{ 'align-last-left': isLastRowIncomplete }">
             <div v-for="(categoria,i) in categorias" :key="i"
-                 :class="{ 'is-3-desktop': !show_chismosa }"
-                 class="column is-4-tablet is-6-mobile ">
+                 :class="{ 'is-3-desktop is-2-fullhd': !show_chismosa }"
+                 class="column is-4-tablet is-6-mobile">
                 <div @click.capture="seleccionar(categoria)" class="card" style="height: 100%">
                     <div class="card-content">
                         <div class="media">
                             <div class="media-content" style="overflow: hidden">
-                                <p class="title is-6" v-text="categoria"></p>
+                                <p class="title is-size-7-mobile is-size-6-tablet has-text-centered" v-text="categoria"></p>
                             </div>
                         </div>
                     </div>
@@ -40,7 +41,7 @@ export default {
         },
         checkIfLastRowIncomplete() {
             this.$nextTick(() => {
-                const wrapper = this.$refs.columnsWrapper;
+                const wrapper = this.$refs.categorias;
                 if (!wrapper) return;
 
                 const columns = wrapper.querySelectorAll('.column');
@@ -50,12 +51,10 @@ export default {
                 }
 
                 const firstRowTop = columns[0].offsetTop;
-
                 let firstRowCount = 0;
                 columns.forEach(col => {
                     if (col.offsetTop === firstRowTop) firstRowCount++;
                 });
-
                 this.isLastRowIncomplete = this.categorias.length % firstRowCount !== 0;
             });
         }
diff --git a/resources/js/components/pedidos/ProductosContainer.vue b/resources/js/components/pedidos/ProductosContainer.vue
index ef9b817..295dc07 100644
--- a/resources/js/components/pedidos/ProductosContainer.vue
+++ b/resources/js/components/pedidos/ProductosContainer.vue
@@ -1,9 +1,10 @@
 <template>
     <div v-show="visible" class="column">
-        <div class="columns is-multiline is-mobile"
+        <div ref="productos"
+             class="columns is-multiline is-mobile"
              :class="{ 'align-last-left': isLastRowIncomplete }">
             <div v-for="(producto,i) in this.productos"
-                 class="block column is-one-quarter-desktop is-full-mobile is-half-tablet min-width-from-desktop">
+                 class="block column is-full-mobile is-half-tablet is-one-third-desktop is-one-quarter-fullhd">
                 <producto-card :key="i"
                     :producto="producto">
                 </producto-card>
@@ -33,7 +34,7 @@ export default {
     methods: {
         checkIfLastRowIncomplete() {
             this.$nextTick(() => {
-                const wrapper = this.$refs.columnsWrapper;
+                const wrapper = this.$refs.productos;
                 if (!wrapper) return;
 
                 const columns = wrapper.querySelectorAll('.column');
@@ -43,12 +44,10 @@ export default {
                 }
 
                 const firstRowTop = columns[0].offsetTop;
-
                 let firstRowCount = 0;
                 columns.forEach(col => {
                     if (col.offsetTop === firstRowTop) firstRowCount++;
                 });
-
                 this.isLastRowIncomplete = this.productos.length % firstRowCount !== 0;
             });
         }