Display: inline-block will not work with PHP (screenshots included)

Question

I'm currently creating an e-commerce site. I'm using PHP/SQL to display information on the product.

I have set a display: inline-block in the CSS and it seems to work fine when there is no PHP. However once I put in the php, it seems like it becomes a display: block element instead.

Here is my code for the html/php:

<section class="products">

    <div class="sectionintro introcontainer">
     <h1>Gucci</h1>
     <p>Established in Florence in 1921, Gucci has evolved from a manufacturer of quality leather accessories into one of the world’s premiere luxury brands. A legacy of glamour, elegance, and modernity underpin its status as a bastion of essential Italian fashion. Alessandro Michele, named creative director in 2015, has ushered in a uniquely contemporary vision of luxury with his eclectic, bohemian, and highly romantic designs. </p>
    </div>



        <article>

        <?php

 $query = "SELECT * FROM products WHERE product_brand = 'Gucci' ";

 $select_all_products = mysqli_query($connection, $query);

 while($row = mysqli_fetch_assoc($select_all_products)){

    $product_id = $row['product_id'];
    $product_name = $row['product_name'];
    $product_type = $row['product_type'];
    $product_image_front = $row['product_image_front'];
    $product_image_back = $row['product_image_back'];
    $product_image_side = $row['product_image_side'];
    $product_image_full = $row['product_image_full'];
    $product_description = $row['product_description'];
    $product_price = $row['product_price'];
    $product_brand = $row['product_brand'];

?>

        <img  src="productImages/<?php echo $product_image_front ?>" >
         <h2><?php echo $product_brand; ?></h2>
          <h3><?php echo $product_name; ?></h3>
          <p><?php echo $product_price; ?></p>
<?php } ?>
</article>
</section>

here is a screenshot of what happens:

and here is my CSS:

.products article{
    display:inline-block;
    width:33%;
    text-align: center;
    padding-bottom:60px;
    padding-top:20px;
}

Here is what happens when there's no PHP:

What am I doing wrong in my code?

Answer 1

You have set the inline-block on the <article> -tag, which means that you need to put the <article> -tag inside the loop:

<?php
$query = "SELECT * FROM products WHERE product_brand = 'Gucci' ";
$select_all_products = mysqli_query($connection, $query);

while($row = mysqli_fetch_assoc($select_all_products)){

    $product_id = $row['product_id'];
    $product_name = $row['product_name'];
    $product_type = $row['product_type'];
    $product_image_front = $row['product_image_front'];
    $product_image_back = $row['product_image_back'];
    $product_image_side = $row['product_image_side'];
    $product_image_full = $row['product_image_full'];
    $product_description = $row['product_description'];
    $product_price = $row['product_price'];
    $product_brand = $row['product_brand'];
?>

    <article>
        <img src="productImages/<?php echo $product_image_front ?>" />
        <h2><?php echo $product_brand; ?></h2>
        <h3><?php echo $product_name; ?></h3>
        <p><?php echo $product_price; ?></p>
    </article>

<?php } ?>

Currently, you're putting all products in the same (and only) <article> -tag.