PHP image gallery. CSS issue with flexbox. only first image is inside the flex box
Get the solution ↓↓↓
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;
}
...
Answer
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>
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: call to a member function format() on string
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.