I created a website using Joomla 4.4.13. I want to show my articles on desktop in 4x2 grid-like layout. As such, I set the Blog/Featured Layouts as follows
Leading Articles: 0
Intro Articles: 8
Columns: 4
The desktop result is as desired. An 4x2 grid layout.
The mobile layout, of course, has only one column. I remember reading somehwere that it is Bootstrap's default behavior.
Now, what is the correct CSS override to display two columns on mobile devices? Something like this.
I tried to ask Gemini AI, and it gives me the following codes:
@media screen and (max-width: 767px) {
/* Adjust these class names to match your specific content's container */
.your-container-class { /* Replace with the actual class name of your content container */
display: flex;
flex-wrap: wrap;
width: 100%;
}
.your-item-class { /* Replace with the actual class name of your column items */
width: 50% !important;
}
}
I understand some of the meaning, like width: 100% for the container; and width: 50% for column items.
But I don't think the CSS object name is correct for Purity IV template. The code says that the column's object name is .your-item-class, but I doubt it is the correct name for Purity IV columns.
So what is the correct name? What is the correct CSS override codes to display two columns on mobile device?
Thank you,
-Kresh