diff --git a/components/CoopCard.vue b/components/CoopCard.vue index d31247e..c88b922 100644 --- a/components/CoopCard.vue +++ b/components/CoopCard.vue @@ -78,6 +78,7 @@ export default { .card { display: flex; flex-direction: column; + justify-content: center; border-radius: 1rem; border: 2px solid white; background: #fff; @@ -87,6 +88,11 @@ export default { max-height: 546px; max-width: 288px; + @include mobile { + width: 100%; + max-width: 100%; + } + .card-image { width: 100%; height: 288px; diff --git a/components/ItemsRow.vue b/components/ItemsRow.vue index 7aae556..c37ea0a 100644 --- a/components/ItemsRow.vue +++ b/components/ItemsRow.vue @@ -13,6 +13,7 @@ ref="productDetails" class="carousel" :items-to-show="itemsToShow" + :breakpoints="config.breakpoints" :gap="1" :pagination-enabled="false" :wrap-around="false" @@ -80,7 +81,7 @@ export default { }, itemsToShow: { type: Number, - default: 4, + default: 1, }, }, data() { @@ -90,15 +91,15 @@ export default { height: 200, breakpointMode: 'carousel', // o 'viewport' breakpoints: { - 300: { - itemsToShow: 2, + 768: { + itemsToShow: 3, snapAlign: 'center', }, - 400: { + 1024: { itemsToShow: 3, snapAlign: 'start', }, - 500: { + 1440: { itemsToShow: 4, snapAlign: 'start', }, diff --git a/components/NavMenu.vue b/components/NavMenu.vue index bc58699..a433079 100644 --- a/components/NavMenu.vue +++ b/components/NavMenu.vue @@ -103,7 +103,7 @@ -