I can’t be sure of what you mean without seeing the page in question, but it sounds like you need replace the css rules in the plugin’s stylesheet with custom css in your child theme’s stylesheet.
If you then change the breakpoints specified in the media queries the point at which the tabs will turn into an accordion can be defined.
This topic may help: http://ww.wp.xz.cn/support/topic/horizontal-tabs
Thread Starter
allm
(@realblueorange)
What I mean is that when the number of tabs is so great that it will not fit in the width of the website, the tabs continue in a second row. I have noticed that these rows partly overlap and that it is possible that the last tab on the first row continues on the second row. So the tab is split over 2 rows of tabs.
I wanted to know what can be done about it. It was not a question about the responsiveness of the plugin.
I was just wondering if this was something that was known to you, if you had a standard solution or if it is something that will be fixed in a later release.
I will dig into the CSS and try to fix it.
If my previous post didn’t help you need to provide a link to your site so I can see the issue. The answer I posted above is the standard solution for cases when the number of tabs means that there are too many to fit side-by-side.
If the tabs don’t fit and you don’t want it to go to the accordion display, you either need fewer tabs or smaller tabs. Using custom CSS to reduce the font size and padding of the tabs might help.
Thread Starter
allm
(@realblueorange)
I did reduce the font size and padding with custom CSS, so for now it is fixed. But I know that more tabs will be needed in the near future. When that happens I’ll figure out a way to make it all work with some more custom CSS. If the solution is worth mentioning I’ll come back here and post it.
Thanks so far.
Thread Starter
allm
(@realblueorange)
After some checking I found out how to add more space between rows when the list of tabs is too long for the width of the content area.
Add this in style.css of your child theme:
.responsive-tabs__list {
line-height: 40px !important;
}
Hope someone finds this helpful.
This does not solve the problem that the tab that is at the end of the first row / beginning of the second row, will split in 2 parts if there is a space in the tab title. If anyone knows how to solve that: please add it here.
Can you provide a link to the page on your site where you’re including this tab group?
Without seeing the page I can offer a few ideas that I have used when my tab group has been too wide to fit the page
- use shorter title text on one or more of the tabs — if a word or two can be omitted without losing the meaning of the title
- use fewer tabs — if a large tab group can be broken into two smaller tab groups
- Use custom CSS as outlined in the documentation to make one of the following changes or a combination of two or more of these:
- Use a smaller font-size on the tabs
- Use a smaller value for the left & right padding on the tabs
- Use a smaller value for the right margin on the tabs
- Specify a narrower font for the tabs
- Change the breakpoint value specified in the media queries so the tab group changes to an accordion display at a larger viewport width than is currently specified
Thread Starter
allm
(@realblueorange)
@cubecolour
Thanks for your extensive list of possible solutions. I have considered them all, but they will not work in my case. I know now that I will eventually have enough tabs for maybe 3 or 4 rows. But, I know more people will find this thread and they will be helped with this. 🙂
I have the problem where tabs overlap solved (see above) but not the case where a tab will be spread over more than 1 row.
I’m sorry, but I can’t show you a page right now, but it can easily be tested by making a page with this code:
[tabby title="first tab"]
[tabby title="second tab"]
[tabby title="third tab"]
[tabby title="fourth tab"]
[tabby title="fifth tab"]
[tabby title="sixth tab"]
[tabby title="seventh tab"]
[tabby title="eighth tab"]
[tabby title="ninth tab"]
[tabby title="tenth tab"]
[tabby title="and another tab"]
[tabbyending]
Somewhere a tab will be spread over 2 rows. Or if things will just fit, you might need to increase some of the first tab titles in length.
Hope this helps to see what I mean.
Really appreciate your help in this.
sorry I’m still not totally sure that understand what you are trying to do. Please provide a link to the page.
From your latest post it sounds like you are trying to have your tabs displayed in two rows. If this is the case, this is not something that this plugin or the jquery script it uses were designed to achieve.
Adding the following css rules may help you get closer to what you are trying to achieve, but without a link to the page it is not easy to help.
.responsive-tabs .responsive-tabs__list__item {
white-space: nowrap;
float: left;
}
.responsive-tabs .responsive-tabs__panel {
clear: left;
}
white-space: nowrap on its own causes the tabs to display in one row, so I added float: left this is a bit of a kludge which may not work well on all themes
The tab content went a bit funky on my test site when adding the .responsive-tabs__list__item rules, but this was corrected by adding the .responsive-tabs .responsive-tabs__panel rule.
Alternatively you could try a solution based around using non breaking spaces: instead of each space in your tab titles.
