While working on my e-commerce platform with vue.js, I noticed that my product listings are not aligning properly, as displayed in the image linked below.
https://i.sstatic.net/2FwaA.png
My goal is to achieve the desired layout illustrated in the image below.
https://i.sstatic.net/NoWAk.png
Below is a section of the code snippet I am currently using:
<template>
<div class="products">
<div class="prod-container">
<div class="bangles" v-for="product in products" v-bind:key="product.id" style="width: 16rem;">
<ProductSlide class="slide" type="bangle" v-bind:product="product"/>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
import ProductSlide from '@/components/productSlide.vue'
export default {
name: 'Bangles',
components: {
ProductSlide
}
}
<script>
<style type="text/css" scoped>
.prod-container {
margin-right: 5%;
}
.bangles {
display: inline-flex;
margin: 1%;
}
@media screen and (max-width:639px) {
.bangles {
margin-left: 25%;
}
}
.products {
margin-bottom: 5em;
}
</style>
Various attempts have been made to adjust the position, display, and width parameters, but none have yielded the desired outcome so far.