Tabs module accordion view responsive breakpoint

Hi,

Is there a way to trigger the Tabs module responsive view on medium device (992px), and not only small device (768px)?
In other words, modify the breakpoint which triggers the switch to accordion view ?
I would need this for a specific occurrence of the Tabs module in a page.

Thanks for your help.

Hey avanti :slight_smile: I believe that behaviour is controlled by breakpoints in the default styles, so you probably just need to copy the current styles and use a slightly more specific classname for the medium device breakpoint to override when it kicks in.

Taking a brief look, this looks like it would work:

@media (max-width: 992px) {
  .fl-module-content .fl-tabs-labels {
    display: block;
  }
  .fl-tabs-horizontal .fl-tabs-label {
    float: none;
  }
}

Hi Guy, thanks much for even bringing the CSS involved :wink:
I’m tryin right now.

And it works, i like such a simple solution.
Thanks again :grinning:

I love simple too! :hugs:

Actually, the CSS code needs to be refined a bit, but that’s the way to go.
Cause there are 2 sets of tabs label: 1 for the horizontal layout and 1 for the stacked layout, which are alternatively showing up depending on the breakpoint.

Here’s what i got, and the borders remain to be to adjusted:

@media (max-width: 992px) {
	.fl-tabs-horizontal .fl-tabs-labels {
		display: none;
	}
	.fl-tabs-horizontal .fl-tabs-label {
		float: none;
	}
	.fl-tabs-panel-label {
		display: table;
	}
}

I knew you would figure out the rest… although I would probably have used display flex rather than table…

Right, i already hacked the desktop view with flexbox to manage the labels with text on multiple lines.: more efficient for vertical alignment.
Maybe it should be extended to mobile view indeed, instead of table.