Support Forums

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

Your Time: Our Time:

Related articles columns of 4 works fine but with 5 its not the whole width?

Featured Lock Resolved Task
Hi,

i have related articles in SP Page Builder.
When i set 4 columns, the whole width is taken - its OK
But when i set 5 columns, the whole witdh is not taken (see attachments)

What can i do?

Attachments (2)

  • 4columns.jpg
    4columns.jpg 164.4 KB
  • 5columns.jpg
    5columns.jpg 177 KB

11 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
As you wish. It should be very close to 5 equal columns.


#related_articles .sppb-addon-articles .sppb-col-sm-2 {
-ms-flex: 0 0 19.9%;
flex: 0 0 19.9%;
max-width: 19.9%;
}

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
May I see URL

Paul Frankowski - Staff

More than a month ago #Permalink
All is clear now.
Because the grid is based on Bootstrap and it does not support 5 columns, it set the grid for 6.
Now a question for you, do you really need 5 columns and use CSS hack,
or you would use 4 or 6 columns instead?

Patrick

More than a month ago #Permalink
In this case i need the 5 columns, the css hack

Patrick

More than a month ago #Permalink
Thank you, works

Paul Frankowski - Staff

More than a month ago #Permalink
It has too, haha

You're welcome.

Patrick

4 weeks ago #Permalink
Hi Paul,

is it possible to have the 5 columns vertically in responsive mode?
Take a look on my attachment, its not readable in horizontal way.

Best regards
Patrick

Attachments (1)

  • screen.jpg
    screen.jpg 46.8 KB

Paul Frankowski - Staff

4 weeks ago #Permalink
As you saw not really, no space to display all of them.
You cannot put 6 passengers into 5 sit car.

Paul Frankowski - Staff

4 weeks ago #Permalink
in mobile view, it's better to have max 3 columns per row.
It means that my original code should be different to be used only in tablet and desktop



@media (min-width: 640px) {
#related_articles .sppb-addon-articles .sppb-col-sm-2 {
-ms-flex: 0 0 19.9%;
flex: 0 0 19.9%;
max-width: 19.9%;}
}


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

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 117
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 91
Toufiq

Toufiq

Total Accepted Answers: 32
Pavel

Pavel

Total Accepted Answers: 3
Al Mamun

Al Mamun

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

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. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us