When CSS Display table is resized at media query breakpoints, it causes other cells to disappear

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!

Answer №1

Try switching out display:table-cell with display:inline-block in your CSS for the desired effect.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The use of @font-face in CSS seems to be malfunctioning

I am having trouble changing the font in my CSS to what I want it to be. body{ background-color:#a8a7a7; color:#C50909; font-family: main, Calibri; text-align:center; } @font-face{ font-family: main; src: url('fonts/RegencieLight.ttf'); } ...

Navigating the rollout of a fresh new design

When implementing a new design on a website, how can you bypass the need for users to clear their browser cache in order to see the updated changes? Is there a way to automatically refresh the cache once a new version of the website is uploaded, or are th ...

Safari Version 8.0.2 experiencing issues with fixed positioning

I am currently working on an angular application and I find myself inside a Twitter Bootstrap modal. My goal is to relocate a button that is located within the body of the modal to the footer of the modal using fixed positioning. This particular button tr ...

Is there a way to display a message in a div container instead of using the alert box when there is a successful ajax response?

Hey there, I'm currently working on implementing error validation handling for a custom form that I've created. I'm looking to display the error messages in a designated div rather than using the standard browser alert box. Since I'm fa ...

Trouble With OnClick and On/Off Class Script Functionality in Chrome and Internet Explorer

I am working on a page with two iframes and a basic navigation bar. The navigation bar links are set up to target one of the iframes and replace its content when clicked. However, I am having trouble highlighting the currently selected link in the iframe - ...

The removal of classList.remove() only eliminates the class itself, not its contents

My goal is to add one class and remove another class when the start quiz button is clicked. While the 'info_box' class is successfully added, the 'start_btn' class does not get removed; it just changes position (from flex to no flex). T ...

Eliminating a line break that appears after incorporating a list into a paragraph

Currently, I am in the process of developing a website where I need to input information. To display this information, I decided to use a list within a paragraph. However, I noticed that after the list name, the text moves to another line which is not wh ...

Creating a Hover Effect for DIV Elements Using Pure CSS, No JavaScript Needed

Imagine a straightforward, horizontal navigation on a website: | Home | About | Products | Contact | Impress | ... or something like that... A rectangular element is positioned above the navigation. Now, I want this rectangle to automatically shift hori ...

Using Selenium with Python to extract text from an element excluding any text within its nested tags

There is a specific element in question '<div class="ProductVariants__PriceContainer-sc-1unev4j-9 jjiIua">₹199 <span class="ProductVariants__MRPText-sc-1unev4j-10 jEinXG">₹690</span></div>' The goa ...

A floating transparent Turing image transformed into a clickable image

After creating an image button with a transparent black hover effect, I noticed that the image no longer functions as a "button." However, the hover effect still works. Is there a way to maintain the button functionality while keeping the color overlay? V ...

Issue encountered while determining the specificity of a CSS selector involving pseudo-classes

As I delved into a tutorial on MDN, an intriguing code snippet caught my attention: /* weight: 0015 */ div div li:nth-child(2) a:hover { border: 10px solid black; } An unanswered question lingers in my mind: Why does this rule's specificity displa ...

What steps can I take to get rid of the 'Optimize CSS Delivery' notification on my website?

Utilizing Google's PageSpeed Insights to analyze my website's speed, I have identified an issue: Your page currently has 11 blocking CSS resources, resulting in slower rendering time. About 5% of the content above-the-fold could be displayed with ...

Creating dynamic input forms in PHP

New to PHP and seeking guidance! I'm in the process of creating a photography website and encountering an issue with a specific page. Essentially, I need this page to display a form with a varying number of inputs. The goal is to have a dynamic visua ...

Using display:inline-block will increase the vertical spacing

I am currently dealing with the following HTML and CSS setup: * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; } .row { background-color: red; /* display: inline-block; */ } ul { ...

AngularJS selector, offering similar functionality to jQuery

There are 3 div elements with the same class in an HTML code snippet: <div class="hide"> </div> <div class="hide"> </div> <div class="hide"> </div> In jQuery, all the div elements can be hidden with a single code sta ...

Issues with jQueryUI sortable causing flickering and erratic movement while attempting to reorder and position items within the list

When using jQueryUI sortable with a long list of items, I encounter an issue where the items flicker and jump around the screen as I try to change their order by dragging them. This makes it nearly impossible to organize the items effectively. It seems li ...

floating point for a list item compared to other elements

nav > ul > li { float: left; } #one { float: left; } <nav> <ul> <li> he has a cow </li> <li > he has a dog </li> <li> he has a mouse </li> </ul> & ...

Using an HTML file as the source for an image in the <img src=""> tag is a simple process that can greatly enhance the visual appeal of your webpage

My goal is to utilize an html file as the source for an image file within the <img src=""> tag in order to prevent mixed-content warnings when using an http image over https. For instance: index.html: <img src="./image.html" > image.htm ...

How can we determine if the submit function in HTML5 is returning an error or not?

I have implemented HTML5 validation on my website. <form class="" id="myForm" method="post" action="#" > <input type="text" required /> <input type="submit" /> </form> <div> <input type="button" id="myButton" /></di ...

When using Owl Carousel in Chrome, the carousel unexpectedly stops after switching tabs

Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the ...