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

Your Time: Our Time:

Columns within a Tab?

Featured Lock Resolved Issue
Is it possible to have multiple columns within a Tab?

I'm trying to place multiple feature boxes within a tab. But when I do, they are added vertically, I'd like them to appear horizontally within each given tab;

Tab #1
- item #1 - item #2 - item #3

NOT

Tab #1
- item #1
- item #2
- item #3

I know this is likely easily achievable with a CSS override, but my CSS skills are pretty poor. :(

Thanks for any assistance you can offer!

3 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
should be possible with custom CSS, example code only*:
For 3 columns use:

@media (min-width: 680px) {
.sppb-tab-pane .sppb-addon-wrapper {
width: 33%; float: left;
display: inline-block;
padding-right: 3%;}
}

-OR---
Three Column Layout can be made also with CSS Flexbox (Modern browsers)

@media (min-width: 680px) {
.sppb-tab-content > .active {display: flex;}
.sppb-tab-content .sppb-addon-wrapper {padding-right: 3%; flex-grow: 1;width: 33%;}
}



*But please excuse us, we cannot teach CSS here, it's beyond basic support.

[email protected]

More than a month ago #Permalink
Hi,
should be possible with custom CSS, example code only*:
For 3 columns use:

@media (min-width: 680px) {
.sppb-tab-pane .sppb-addon-wrapper {
width: 33%; float: left;
display: inline-block;
padding-right: 3%;}
}

-OR---
Three Column Layout can be made also with CSS Flexbox (Modern browsers)

@media (min-width: 680px) {
.sppb-tab-content > .active {display: flex;}
.sppb-tab-content .sppb-addon-wrapper {padding-right: 3%; flex-grow: 1;width: 33%;}
}



*But please excuse us, we cannot teach CSS here, it's beyond basic support.


Thanks kindly, Paul! :D


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: 133
Toufiq

Toufiq

Total Accepted Answers: 105
Sifat

Sifat

Total Accepted Answers: 59
DS

Dustin Swayne

Total Accepted Answers: 1
S

ssnobben

Total Accepted Answers: 1

116

Templates

300072

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