[SOLVED] PHP image gallery. CSS issue with flexbox. only first image is inside the flex box

PHP image gallery. CSS issue with flexbox. only first image is inside the flex box

Can anyone please tell me what is wrong with my code that only the fist image is inside the flexbox and the other two are floating outside?

What it should do is display a gallery of images with three per row. The first piece of PHP code is to give an image count above the gallery.

Here is the HTML/PHP ...

<html>
    <head>
        <title>GALLERY TEST</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width-device-width, initial-sacle 1.0">
        <link rel="stylesheet" href="styles/master-style.css">
    </head>
    <body>


<?php
    include_once 'include/dbh.inc.php';

        $sql3 = "SELECT * FROM bth_gal_data WHERE GAL_TLC='LSF'";
        $result3 = mysqli_query($conn, $sql3);
        $queryResults3 = mysqli_num_rows($result3);

        echo "<main class='GALLERY_WRAPPER'>
            <p>Welcome to the TEST Image gallery. There are $queryResults3 images.<p>";
?>
            <div class='GALLERY_FLEX'>
<?php

            $stmt4 = mysqli_stmt_init($conn);
            if (!mysqli_stmt_prepare($stmt4, $sql3)) {
              echo "SQL statement failed!";
            } else {
              mysqli_stmt_execute($stmt4);
              $result4 = mysqli_stmt_get_result($stmt4);
                while ($row = mysqli_fetch_assoc($result4)) {
                echo "<a href='#'>
                    <img src=".$row['GAL_PATH']." alt=".$row['GAL_DESC']." data-id=".$row['GAL_FILENAME']." width='300' height='auto'>
                </a>
        </div>

        </main>";
        }
    }

?>


    </body>
</html>
...

Here is the CSS ...

@font-face {
  src url(../fonts/Catamaran-Regular.ttf);
  font-family: Catamaran;
}

@font-face {
  src url(../fonts/CormorantGaramond-Regular.ttf);
  font-family: Cormorant Garamond;
}

.GALLERY_WRAPPER p {
  margin: 10px 0px;
  font-family: Catamaran;
  font-size: 24px;
  font-weight: 900;
  color: #111;
}
.GALLERY_WRAPPER {
  width: 1000px;
  margin: 30px auto;
}
.GALLERY_FLEX {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  background-color: blue;
}
.GALLERY_FLEX a {
  width: 300px;
  margin: 10px 5px 0;
}
.GALLERY_FLEX img {
  width: 100%;
  height: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

...

Solution

I think I figured it out. I belevie you are closing off your </div> and </main> early in the while loop. Those 2 parts should be outside of it. So like this. Edit: I think they should be out of the PHP loop entirely, so like this.

    <?php

                $stmt4 = mysqli_stmt_init($conn);
                if (!mysqli_stmt_prepare($stmt4, $sql3)) {
                  echo "SQL statement failed!";
                } else {
                  mysqli_stmt_execute($stmt4);
                  $result4 = mysqli_stmt_get_result($stmt4);
                    while ($row = mysqli_fetch_assoc($result4)) {
                    echo "<a href='#'>
                        <img src=".$row['GAL_PATH']." alt=".$row['GAL_DESC']." data-id=".$row['GAL_FILENAME']." width='300' height='auto'>
                    </a>"; }

        }

    ?>
</div>
</main>