0
I have a list of eight photos, and then I have a button that carries two more photos. However, the photographs do not appear correctly aligned as a hole always appears without any photograph.
The code I have is this::
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Portfolio</h2>
<hr class="small">
<div class="row">
<?php
$query=mysqli_query($db,"select id_album, nome, foto from albuns order by id_album ASC limit 8");
while($cat=mysqli_fetch_assoc($query)){?>
<div class="col-md-6">
<div class="portfolio-item">
<p class="imgDescription"> <?php echo $cat['nome'];?> </p>
<a href="#">
<img class="img-portfolio img-responsive" src="<?php echo $cat['foto'];?>" onClick="location.href='listagem_album.php?id=<?php echo $cat['id_album'];?>'">
</a>
</div>
</div>
<?php } ?>
<?php
$query=mysqli_query($db,"select id_album, nome, foto from albuns order by id_album DESC limit 2");
while($cat=mysqli_fetch_assoc($query)){?>
<div class="col-md-6" id="fotos" >
<div class="portfolio-item">
<p class="imgDescription"> <?php echo $cat['nome'];?> </p>
<a href="#">
<img class="img-portfolio img-responsive" src="<?php echo $cat['foto'];?>" onClick="location.href='listagem_album.php?id=<?php echo $cat['id_album'];?>'">
</a>
</div>
</div>
<?php } ?>
</div>
<!-- /.row (nested) -->
<div id="button" style=" width: 150px;height: 75px;"><a class="btn btn-dark" style="margin-left: 400px;
margin-top: 0px;">View More Items</a></div>
</div>
<!-- /.col-lg-10 -->
</div>
Try to make each line (
.col-md-6) have a time (height) always the same, you can easily do this in your css. The reason for this is that the photos have different heights and the height of each line (the two photos side by side) always fits according to the larger photo. I think it will be solved if you put a fixed height– Miguel
That’s right @Miguel. I also add Claudia, that you create a div col-Md-12 with each image occupying col-Md-6 inside this, so the next two below will be independent of those above.
– Paulo Weverton