Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Two Articles Columns (Next To Each Other) On Mobile

Featured Lock Resolved Task
I noticed there was another post relating to this, but it looks unsolved, so hopefully I can get a clear answer for this.

Instead of having the multiple articles load in one column below eachother. I would like to have the articles appear in two columns only on my mobile.

Tried the Column options (not Row or Addon) and noticed in the Responsive tab there is a Mobile Layout option. Here I selected: col-xs-5
But this just halfs the width of the articles still placing them below oneanother.

So how can this be achieved for creating the articles in two columns?

I tried using css as well but this gave the same result.

4 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
probably you have to override default behavior with custom CSS.
We talk about Articles addon ?


More than a month ago #Permalink
Assuming we are talking about the "AddOn Articles":
Unfortunately you have only one parameter to control the columns and their resulting CSS class.
It is calculated by the parameter "Columns" inside the AddOn. The result depends on your number input.
The class is always .sppb-col-sm-...

Currently you would have to Override the CSS rules in a respective media-query for extra small screens.
Or you would have to create an Addon override in your template's sppagebuilder folder. The latter might add or replace the default class with .sppb-col-xs-

Hope this helps.


Would be nice to have more flexibility than the "columns" parameter. Don't hard-code 1 certain bootstrap grid class, either let the user choose one, or allow to select multiple classes, or just custom class input...


More than a month ago #Permalink
Yes articles addon.

Sounds quite complicated for something that should be quite simple I think.

Will have to try again through class .sppb-col-sm- when I have time for it.
Rather not go into addon overrides.

Paul Frankowski - Staff

More than a month ago #Permalink
I haven't seen your site URL, so I have to guess.
I tested below solution on my demo and worked.

1) Add new ID for row where you have Article Addon, for example, onlytwo
2) In my demo I used 2 columns for desktop as well, then in Custom CSS use:

@media (max-width: 640px) {
#onlytwo .sppb-col-sm-6 {
float: left; width: 49.9%;}

as a result I got 2 columns in mobile view.

Attachments (1)

  • 2-col.jpg
    2-col.jpg 132.2 KB

There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)



Total Accepted Answers: 135
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 120


Total Accepted Answers: 65


Total Accepted Answers: 5
Peter Atkin

Peter Atkin

Total Accepted Answers: 2




Community Users


Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us