Looking for articles module(s) that can show two columns on mobile devices

[kreshnaiceheart]

Hello,

I've been looking for Joomla articles module(s) that can show two columns on mobile devices. Like this:
Example 1 - JooFood.
Example 2 - also JooFood.
Example 3 - Good Old Games.

Somewhere in 2020 I tried Mini FrontPage for the purpose. Indeed, it does show two columns on mobile devices. Problem is: it uses its own intro image (a somewhat cropped version of the article's image), which is stored in its own cache folder, and the cache images needs to be deleted manually to be updated if I change an article's image.

The JooFood template (as shown on the examples above) is also able to show two columns on mobile device, but I don't know what extensions that enable such thing. My guess is JWeb Portfolio Display (included in the template's page), but when I tried to download JWeb Portfolio Display's installer, the extension has been unpublished.

So, any suggestion? Which Joomla article extensions is the best to show 2 columns on mobile devices?

Many thanks,
- Kreshna

[Pavel-ww]

Hi. Any web master should strive to learn CSS. There are no extensions for every possible situation, especially for such a trivial task that can be solved with CSS in five minutes.

Moreover, it is impossible to develop an extension that would work across all templates, as each template has its own layout and set of CSS classes. A developer would have to study all existing templates on the market.

If you keep looking for and installing extensions for every little thing, your site will turn into a Frankenstein with poor performance and constant conflicts. Learn CSS and take care of your site's ecosystem.

If you need help with CSS in your specific case, please provide a link to your website. And determine for which specific screen sizes you need this. There are several breakpoints for mobile devices.

Here is mobile breakpoints (I doubt that you would like two columns on screens smaller than 575 px.)

2.jpg

[pablop76]

As @Pavel-ww mentioned, adjust the css, specifically the media query that is responsible for these settings. Use the developer tools in your browser to find them.

Adjust this code if you are using the Cassiopeia template

Code: Select all

@supports (display:grid) {
    @media (width >= 992px) {
        .blog-items.columns-2 {
            grid-template-columns: 1fr 1fr;
        }
    }
}

[Pavel-ww]

Adjust this code if you are using the Cassiopeia template

Hi. I think there is a mistake in your code.

1.jpg

And I still wouldn't use the new syntax in media queries.

[pablop76]

This is the original joomla code that needs to be customized. For example, set media >=319.9px