CSS #media div class not resizing - html

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

[class="column"] selector does not override .column selector, even if placed later in code, because it's an attribute selector and has lower specificity than class selector. 1
You should use .column inside the #media query as well. Note [class="stuff"] is a far worse selector than .stuff because it will stop working the moment you add a new class to the same element.
This should work:
.column {
float: left;
width: 33.33%;
padding: 5px;
}
#media only screen and (max-width: 768px) {
.column {
display: block;
width: 100%;
}
}
1 I've just tested (to make sure my answer is correct) and it appears both Chrome and Firefox are smart enough nowadays to recognize the fact that, even if [class="column"] is an attribute type selector, because it refers the class attribute they give it the proper class specificity. However, the second argument (that it stops working as a selector when another class is added to the element) is still valid.

Answer 2

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.