CODEWITHSUNDEEP
htmlcssresponsive-design
user2927255
user2927255

Reputation:

CSS Display table hides other cell when resized at media query breakpoints

this is about responsive image gallery website with different image sizes with no margins/paddings. my problem is that the .showcase class is hiding at @media breakpoint when resizing but I want to display all the images.

HTML

<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 of this will be 

<div class="row">
<a class="showcase">...</a>
<a class="showcase">...</a>
<a class="showcase">...</a>
</div>

Normal Size and CSS Below

img1 | img 2 | img3

img4 | img 5 | 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 CSS

img1 | img2

img4 | img5

@media only screen and (max-width: 767px) { .showcase{ width:50%; } }

Breakpoint 2 and CSS

img1

img4

@media only screen and (max-width: 480px) { .showcase{ width:100%; } }

after the breakpoint 2, only 2 images will be displayed. i've used display:block; and float:left; before but the images stack vertically sometimes because they have different sizes. what should be the corrent approach for this? message me if you want to see the real thing. thank you in advance.

Upvotes: 1

Views: 1044

Answers (1)

Jignesh Kheni
Jignesh Kheni

Reputation: 1312

add display:inline-block instead of display:table-cell in your css.

Upvotes: 1

Related Questions