220061
Well-Known Coder
I have been trying to style the items from my store right now I have this code
This almost shows the styling like i want problem is when you have for example 5 items it does this weird thing where they put the last two divs undernead eachother like this:
[div][div][div]
[div]
[div]
that''s not what I want I want it to look like
[div][div][div]
[div][div]
how can I fix this
pic of the last two divs being all weird like this
CSS:
<style>
header{
background-image: url("brood.jpg");
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
section{
display: grid;
grid-template-columns: repeat(3, 1fr); /* you can change 1fr to whatever you want, 200px for example*/
gap: 2rem;
background-color: orange;
}
.card{
height: 20%;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: black;
color: white;
cursor: pointer;
padding: 25px;
border-radius: 50px;
}
#myBtn:hover {
background-color: #555;
}
</style>
<body>
<?php
include "config.php";
$sql = 'SELECT * FROM broodjes';
$stmt = $conn->prepare($sql);
$stmt->execute();
$result = $stmt->get_result(); // get the mysqli result
echo '<section class="py-5">';
while($row = mysqli_fetch_assoc($result)){
//echo '<div class="grid">';
echo '
<div class="px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-1 row-cols-2 row-cols-md-2 row-cols-xl-1 ">
<div class="col mb-5">
<div class="card h-100">
<!-- Product image dit kan later nog wel-->
<div class="fw-image">
<img class="card-img-top" src="brood.webp" alt="brood foto" />
</div>
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<div class="broodjes_ID">
<input type="hidden" name="broodjes_ID" value='. $row['broodjes_ID'] . '/>
</div>
<!-- Product name-->
<div class="broodnaam">
<input type="hidden" name="broodnaam" value='. $row['broodnaam'] . '/>
<h5 class="fw-bolder">'.$row['broodnaam']. '</h5>
</div>
<!-- Product price-->
<div class="prijs">
<input type="hidden" name="broodnaam" value='. $row['prijs'] . '/>
<h3> Prijs: </h3> <h3 class="fw-price"> €'.$row['prijs']. '</h3><br>
</div>
<!--voorraad-->
';
if($row['voorraad'] == 0){
echo '<h3 class="fw-voorraad" style="color: red;"> uitverkocht</h3><br>';
echo '<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
</div>';
}else{
//link die misschien kan helpen https://www.withinweb.com/info/a-shopping-cart-using-php-sessions-code/
$broodjes = $row['broodjes_ID'];
echo ' Voorraad: '.$row['voorraad'].'<br>
</div>
</div>
<!-- Product actions-->
<form action="cart.php?broodjes_ID='. $broodjes.'" method="POST" name="broodjes" value=""
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><button class="btn btn-outline-dark mt-auto shop-item-button" type="submit" name="add_to_cart">Bestellen</button></div>
</div>
</form>';
}
echo '</div>
</div>
</div>';
echo '</div>';
}
echo '</section>';
This almost shows the styling like i want problem is when you have for example 5 items it does this weird thing where they put the last two divs undernead eachother like this:
[div][div][div]
[div]
[div]
that''s not what I want I want it to look like
[div][div][div]
[div][div]
how can I fix this
pic of the last two divs being all weird like this