CSS @media div class not resizing

Question

I am following the tutorial from W3Schools on "How TO - Align Images Side By Side", located at https://www.w3schools.com/howto/howto_css_images_side_by_side.asp

I have the following div class called column, and I am trying to resize it when the width of the screen changes, in order to adapt in different screen sizes on mobile and desktop.

The HTML code is as follows:

<div class="row">
    <div class="column">
        <img id="firstImage" style="width: 100%">
        <figcaption id="firstCaption"></figcaption>
    </div>
    <div class="column">
        <img id="secondImage" style="width: 100%">
        <figcaption id="secondCaption"</figcaption>
    </div>
    <div class="column">
        <img id="thirdImage" style="width: 100%">
        <figcaption id="thirdCaption"></figcaption>
    </div>
</div>

On desktop (default) mode, the three images are listed in a row, like so: https://i.imgur.com/a/zg2j5rv.png This is defined by the following CSS code:

.column {
    float: left;
    width: 33.33%;
    padding: 5px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

But when the width of the screen reaches 768px or less (mobile screen), I intend for the images to be listed vertically, so that the images are listed on above and below one another. I have added the following CSS code to style this change:

@media only screen and (max-width: 768px) {

    [class="column"] {
         display: block;
         width: 100%;
    }

}

In the above code, my logic is to make each column div listed in block form, with its width spanning across the entire width of the screen. That way, each div would be pushed to a new line while the div spans the entire width. However, when I do resize the screen, the images remain in a horizontal row, as they are squeezed together as 3 images in a row.

Any ideas on how I can get each column div to move to a new line when the width of the screen decreased? Any help is greatly appreciated!

Answer 1

Try this. This is for a three column layout but you should be able to change percentages if needed.

.col-container {
display: table;
width: 100%;
}

.imagegroup {
width: 100%;
background-color: #ffffff;
}

.img-container {
display: table;
float: left;
width: 33.3%;
}

@media only screen and (max-width: 500px) {
.img-container {
display: table;
float: left;
width: 100%;
}
}

<div class="imagegroup">
<div class="col-container">

<div class="img-container">
<p>Image 1 goes here</p>
</div>

<div class="img-container">
<p>Image 2 goes here</p>
</div>

<div class="img-container">
<p>Image 3 goes here</p>
</div>

</div>
</div>

They should now stack.

UPDATE

Just click the full screen link for the code and then resize the window. Anything within those DIVs will stack on top of each other.