The columns widths are not showing 3 in a row I tried inline, inline-block, flex
I also tried using different cards and forms but nothing seems to work they always display underneath each other I have changed form
to and also changed the headers but they will not get in one line
<?php
include 'includes/header.php';
include 'includes/conn.php';
?>
<section class="white-section" id="pricing">
<h2 class="section-heading">A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<?php
$query = "SELECT * FROM products ORDER BY prod_id ASC";
$result = mysqli_query($conn,$query);
if(mysqli_num_rows($result)>0){
while($res = mysqli_fetch_array($result)) {
?>
<div class="row">
<div class="pricing-column col-md-
4">
<div class="card">
<div class="card-header">
<h3><?php echo $res['prod_name'];?>
</h3>
</div>
<div class="card-body">
<h2 class="price-text">R<?php echo
$res['prod_price']; ?></h2>
<p><?php echo $res['prod_1'];?></p>
<p><?php echo $res['prod_2'];?></p>
<p><?php echo $res['prod_3'];?></p>
<button class="btn btn-lg btn-block
btn-outline-dark" type="button">Sign Up</button>
</div>
</div>
</div>
My code seems to work correctly but with some of the cards/forms it will display one correctly and the rest will get smaller every time it loads a new product
<?php }}?>
</section>
.white-section {
background-color: #fff;
}
#pricing {
padding: 100px;
}
.price-text {
font-size: 3rem;
line-height: 1.5;
}
.pricing-column {
padding: 3% 2%;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Montserrat-Bold";
display: inline-grid;
}
p {
color: #8f8f8f;
display: inline-grid;
}