Currently, I'm working on a website where I am incorporating the Flipkart API to display a list of products. However, the products are not appearing in the well-formatted view that I had designed. Specifically, I want only 4 products to show per row but I am struggling to achieve this. Any guidance would be greatly appreciated.
<div class="container-fluid">
<div class="row">
<div class="column" ng-repeat="data in flipkart">
<div class="cards card1">
<a href="" ng-click="userSearchDetails(data.productBaseInfoV1.title)">
<img src="{{data.productBaseInfoV1.imageUrls.200x200}}" class="img-responsive" style="padding-top: 3px;">
<strong> <p>Rs {{data.productBaseInfoV1.flipkartSpecialPrice.amount}} </p></strong> </a>
<h6><strong>{{data.productBaseInfoV1.title}}</strong></h6>
</div>
</div>
</div>
</div>
CSS
<style>
div {
margin: 0px;
}
.body-class {
background-color:#FAFAFA;
}
.row {
content: "";
display: table;
overflow:hidden;
clear: both;
margin-left: 45px;
}
.column {
float: left;
width: 20%;
max-height: 50%;
margin:10px;
padding-right: 15px;
}
h6 {
padding:3px;
overflow: hidden;
}
</style>