Support Forums

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

Your Time: Our Time:

multiple columns next to each other on mobile

Featured Lock Resolved
Hi, when I create columns, let's say 6 in a row. I would like to see 3 columns next to each other on a mobile divice instead of 6 below each other.
Where can I do this?

16 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
this is customization question, so I can give you tips only:
It request :
1) Extra Class Name for that row
2) Custom CSS with:
@media (max-width: 480px){...}
and defined static width of columns

But Yes, it's possible.

danny ter avest

More than a month ago #Permalink
Hi Paul,

thank you, my extra classname is sppb-addon-containercontainer

so it wille be:

@media (max-width: 480px)
.sppb-addon-containercontainer
{ width: 200px;}

?

Paul Frankowski - Staff

More than a month ago #Permalink
It's your job to test all possibilities.
It request to override few bootstrap rules.

danny ter avest

More than a month ago #Permalink
Hi Sorry, I Can't get it to work.
I've tried:
@media (max-width: 768px)
.sppb-section.blocks {
width: 25%; }

blocks is my css class:(

danny ter avest

More than a month ago #Permalink
danny ter avest wrote:

Hi Sorry, I Can't get it to work.
I've tried:
@media (max-width: 768px)
.sppb-section.blocks {
width: 25%; }

blocks is my css class:(


see: http://www.inferno-av.nl/ the top four blocks I want to be 2 next to eachother on a mobile device

Paul Frankowski - Staff

More than a month ago #Permalink
1) First you need not 25% on mobile but 50% of width, and wrong class
2) Second I suggest to add extra class name for that section for example : twobytwo
3) Then use:
@media (max-width: 768px) {
.twobytwo .sppb-col-sm-3 {width: 50%; }
}


I hope now you see difference

Attachments (1)

  • red.jpg
    red.jpg 183 KB

danny ter avest

More than a month ago #Permalink
Paul Frankowski wrote:

1) First you need not 25% on mobile but 50% of width, and wrong class
2) Second I suggest to add extra class name for that section for example : twobytwo
3) Then use:
@media (max-width: 768px) {
.twobytwo .sppb-col-sm-3 {width: 50%; }
}


I hope now you see difference


Hi Paul,

I'm sorry but still not working.
I don't know what I'm doing wrong :-(

Attachments (2)

  • inferno2.png
    inferno2.png 153.7 KB
  • inferno.png
    inferno.png 158.4 KB

pepperstreet

More than a month ago #Permalink
Actually, this is a default feature of the underlying Bootstrap grid. Everything is already there... unfortunately the PageBuilder UI and configuration makes no use of it.
Bootstrap column classes should be "selectable" like in Helix3 layout editor... or at least a simple Custom Class input.
That custom-class have to be added to the same DIV element!!! I mean the DIV that currently gets the "COL-xx-xx" from the green pagebuilder columns selector. It MUST NOT be applied to another wrapping DIV (section or row)!!!

(PS: No offend, I wonder why this is not possible from the beginning. This is the BASIS and MAIN REASON to choose the Bootstrap v3 Grid at all)

Paul Frankowski - Staff

More than a month ago #Permalink
Sorry but right now I do not see class name in code. So it will not work !
(!) add class name in row settings.
---
And if still fail...
send me full access to website with current forum topic, it will be the fast way.
Use PM (link is under my avatar)

Attachments (1)

  • no.png
    no.png 146.8 KB

danny ter avest

More than a month ago #Permalink
Paul Frankowski wrote:

Sorry but right now I do not see class name in code. So it will not work !
(!) add class name in row settings.
---
And if still fail...
send me full access to website with current forum topic, it will be the fast way.
Use PM (link is under my avatar)


Hi Paul I've tried with class container, like this:
@media (max-width: 768px) {
.container .sppb-col-sm-3 {width: 50%; }
}

I will send you the login

thanx in advance

Paul Frankowski - Staff

More than a month ago #Permalink
Done,
check my CSS code inside custom.css (in template folder /css):

@media (max-width: 768px) {
#twonotfour .sppb-col-sm-3 {width: 49.5%; float:left; }
.sppb-btn-danger {margin-left: 55px;}
}
@media (max-width: 380px) {
#twonotfour .sppb-col-sm-3 {width: 99.5%; float:none; margin-bottom:15px; }
.sppb-btn-danger {margin-left: 85px;}
}

I added new ID for that row.

Attachments (1)

  • here-t.png
    here-t.png 167.7 KB

danny ter avest

More than a month ago #Permalink
Paul Frankowski wrote:

Done,
check my CSS code inside custom.css (in template folder /css):

@media (max-width: 768px) {
#twonotfour .sppb-col-sm-3 {width: 49.5%; float:left; }
.sppb-btn-danger {margin-left: 55px;}
}
@media (max-width: 380px) {
#twonotfour .sppb-col-sm-3 {width: 99.5%; float:none; margin-bottom:15px; }
.sppb-btn-danger {margin-left: 85px;}
}

I added new ID for that row.


Hi Paul, thanks for helping me but on my mobile i still see four below eachother.

Attachments (1)

  • inferno.png
    inferno.png 279 KB

danny ter avest

More than a month ago #Permalink
please still need help:(

Paul Frankowski - Staff

More than a month ago #Permalink
Upss.. My mistake.
And you wanted 3 columns in smartphone view?
In most cases it will be hard makes them look nice.
Maybe only two columns on mobile?
If yes, please replace that code (previous )
@media (max-width: 380px) {
#twonotfour .sppb-col-sm-3 {width: 99.5%; float:none; margin-bottom:15px; }
.sppb-btn-danger {margin-left: 85px;}
}


by this one (new!)

@media (max-width: 480px) {
.sppb-btn-danger {margin-left: 85px;}
}

As you see all you have to do is remove row with #twonotfour .sppb-col-sm-3 {...}

pepperstreet

More than a month ago #Permalink
pepperstreet wrote:
Actually, this is a default feature of the underlying Bootstrap grid. Everything is already there... unfortunately the PageBuilder UI and configuration makes no use of it.
Bootstrap column classes should be "selectable" like in Helix3 layout editor... or at least a simple Custom Class input.
That custom-class have to be added to the same DIV element!!! I mean the DIV that currently gets the "COL-xx-xx" from the green pagebuilder columns selector. It MUST NOT be applied to another wrapping DIV (section or row)!!!
(PS: No offend, I wonder why this is not possible from the beginning. This is the BASIS and MAIN REASON to choose the Bootstrap v3 Grid at all)


Sorry, I have to bump my own comment and have to contradict again. Please, see my screenshot for the actual issue and logical problem!
The addon-parser.php should be corrected and improved. This is only one possible solution. I could also imagine a simpler UI and an extra parameter set for grid classes.

Attachments (1)

  • sppb_custom_css_classes_bug.png
    sppb_custom_css_classes_bug.png 59.3 KB

Paul Frankowski - Staff

More than a month ago #Permalink
I will redirect your request to our development team. Thanks.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 129
Sifat

Sifat

Total Accepted Answers: 81
Toufiq

Toufiq

Total Accepted Answers: 66
Pavel

Pavel

Total Accepted Answers: 6
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 5

114

Templates

293325

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