I am encountering an issue with my CSS code that includes the column-count property within a media query, and for some unknown reason, it doesn't seem to be working!
.masonry {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
}
@media only screen and (max-width: 768px) {
.masonry {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width: 425px) {
.masonry {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
.item {
display: inline-block;
}
Additionally, below is the HTML code snippet:
<div class="masonry">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
Seeking assistance to identify what is causing this discrepancy in the code or if there's an error on my end. Any help will be greatly appreciated!
Curiously, during testing, I noticed that the media query didn't appear in Chrome's inspect feature. However, upon adding another property such as color, the media query functioned properly!