This is a discussion on creating a responsive image gallery website with images of different sizes and no margins or paddings. The issue at hand is that the .showcase class hides at a specific @media breakpoint when resizing, but there is a desire to display all images regardless.
HTML Code
<a href="album.php?album_id=' . $row['album_id'] . '" class="showcase">
<img src="' . $row['album_thumb'] . '">
<div class="label-container">
<h3 class="title">' . $row['album_title'] . '</h3>
<p class="desc">' . $row['album_desc'] . '</p>
</div>
</a>'
The output will be:
<div class="row">
<a class="showcase">...</a>
<a class="showcase">...</a>
<a class="showcase">...</a>
</div>
Normal Size Layout and CSS Styling Below
img1 | img2 | img3
img4 | img5 | img6
.content{
width:100%;
display:table;
}
.row{
display:table-row;
}
.showcase{
display:table-cell;
position: relative;
width:33.333333%;
background-color: #000;
vertical-align: middle;
}
Breakpoint 1 and Corresponding CSS Rules
img1 | img2
img4 | img5
@media only screen and (max-width: 767px) { .showcase{ width:50%; } }
Breakpoint 2 and Associated CSS Styles
img1
img4
@media only screen and (max-width: 480px) { .showcase{ width:100%; } }
After reaching breakpoint 2, only 2 images are displayed. Previous attempts involved using display:block; and float:left; which caused the images to stack vertically due to varying sizes. What would be the correct approach in this scenario? Feel free to reach out if you'd like to see the actual webpage. Thank you!