I downloaded a code to practice making an eshop and i want to display 4 products instead of 3 products per row. I tried different ways of doing it but all have failed so far. I also tried to delete some of the lines to see if anything changed but I didnt get the result that i wanted. If someone could help i would appreciate it a lot. This is the code
<section class="product-shop spad">
<div class="container">
<div class="row">
<div class="product-list">
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-1.jpg" alt="">
<div class="sale pp-sale">Sale</div>
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Towel</div>
<a href="#">
<h5>Pure Pineapple</h5>
</a>
<div class="product-price">
$14.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-2.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Coat</div>
<a href="#">
<h5>Guangzhou sweater</h5>
</a>
<div class="product-price">
$13.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-3.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Shoes</div>
<a href="#">
<h5>Guangzhou sweater</h5>
</a>
<div class="product-price">
$34.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-4.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Coat</div>
<a href="#">
<h5>Microfiber Wool Scarf</h5>
</a>
<div class="product-price">
$64.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-5.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Shoes</div>
<a href="#">
<h5>Men's Painted Hat</h5>
</a>
<div class="product-price">
$44.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-6.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Shoes</div>
<a href="#">
<h5>Converse Shoes</h5>
</a>
<div class="product-price">
$34.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-7.jpg" alt="">
<div class="sale pp-sale">Sale</div>
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Towel</div>
<a href="#">
<h5>Pure Pineapple</h5>
</a>
<div class="product-price">
$64.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-8.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Coat</div>
<a href="#">
<h5>2 Layer Windbreaker</h5>
</a>
<div class="product-price">
$44.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-9.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Shoes</div>
<a href="#">
<h5>Converse Shoes</h5>
</a>
<div class="product-price">
$34.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Aucun commentaire:
Enregistrer un commentaire