I'm encountering an issue with the layout of my design.
On my product page, I have two buttons placed on top of each other because one is within a form (refer to the image).
https://i.sstatic.net/cS9TI.jpg
I would like to position the two buttons side by side. Can someone assist me with this? Below are my HTML and CSS code snippets.
Thank you in advance!
HTML:
<!DOCTYPE HTML>
<div class="container text-center">
<div class="sale">
<h1>On Sale</h1>
<p class="text-secondary">
We have new sales promotions online for a short period of time every day. We offer products from
popular labels and luxury brands in the lifestyle segment up to 75% cheaper than the
recommended retail price.
</p>
</div>
</div>
<section class="on-sale">
<div class="container">
<div class="row">
<?php
for($i = 0; $i < $countProductItems && $i < 4; $i++){
?>
<div class="col-md-3">
<div class="product-top">
<a href="products/product-page.php?product=<?php echo ($saleProducts[$i]['strProductNaam']); ?>" onclick="POST"><img src="<?php echo ($saleProducts[$i]['imgProduct1']);?>" class="img-fluid" alt="Product1"/></a>
<div class="overlay-right text-center">
<button type="button" class="btn btn-secondary" title="Quick Shop">
<a href="products/product-page.php?product=<?php echo ($saleProducts[$i]['strProductNaam']); ?>" onclick="POST"><i class="fa fa-eye text-white"></i></a>
</button>
<form action="includes/shopping-cart.inc.php?action=add&id=<?php echo ($saleProducts[$i]['ID'])?>" method="post">
<input class="text-center" type="hidden" name="quantity" value="1"/>
<input type="hidden" name="index-page" value="index">
<input type="hidden" name="product-name" value="<?php echo ($saleProducts[$i]['strProductNaam']); ?>">
<input type="hidden" name="product-price" value="<?php echo ($saleProducts[$i]['strSalePrijs']); ?>">
<button type="submit" class="btn btn-secondary " title="Add to cart" name="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
</form>
</div>
</div>
<div class="product-bottom text-center">
<p>
<?php rating_star(($saleProducts[$i]['RatingStar'])) ?>
</p>
<p><h3><?php echo ($saleProducts[$i]['strProductNaam']); ?></h3></p>
<?php sale_product(($saleProducts[$i]['intPrijs']), ($saleProducts[$i]['strSalePrijs']))?>
</div>
</div>
<?php
}
?>
</div>
</div>
</section>
</html>CSS:
.container .sale{
padding: 3rem 0;
}
.container .sale{
font-family: var(--gugi);
}
.container .sale{
padding: 0.5% 25%;
font-size: 0.9em;
}
.on-sale{
margin: 50px 0;
}
.on-sale img{
width: 100%;
padding: 20px;
transition: 1s;
cursor: pointer;
}
.on-sale img:hover{
transform: scale(1.1);
}
.product-top{
width:100%;
display: inline-block;
}
.product-bottom .fa{
color: orange;
font-size: 10px;
}
.product-bottom h3{
font-size: 20px;
font-weight: bold;
}
.product-bottom h5{
font-size: 15px;
padding-bottom: 10px;
}
.make_red {
color: red;
}
// codefilling text[error] - nfnjsnfjsfnbjkdsnfdsfndjsfbjabsdjhbgdgabadsg