I'm attempting to implement the bootstrap 4 masonry effect on my website, but I'm facing issues with card responsiveness. The page is very basic without any special effects.
While the page works well when resizing the browser window, it doesn't stack cards properly on mobile screens. I want them to stack up on top of each other as they do when the browser window is resized.
Below is the simple HTML code:
@media screen and (max-width: 992px) {
.card-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
@media screen and (max-width: 600px) {
.card-columns {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
<div class="container">
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
... // Repeat for other cards
</div>
</div>
Despite using media queries in CSS, the page still appears zoomed out on small screens.
Here's a visual of how it looks on mobile screens:
No additional info provided.
If you'd like to view the website on your mobile, please follow this link: