Tabs on mobile in the top

Resolved meenimee
(@meenimee)

2 weeks, 6 days ago

Hi there!,

Is there any way of coficuring that the tabs module on mobile has the tabs in the top and not as an accordion?

E.g.

_____
Tab 1
Tab 2
Tab 3

Content
_____

I have a lot of content in some of my tabs and I am afraid that some users will miss some content with the tabs being so far down.

Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author Hardeep Asrani
(@hardeepasrani)

2 weeks ago
Hey @meenimee,

You can add the following CSS in your WordPress to do that:
```
@media (max-width: 800px) {
  .wp-block-themeisle-blocks-tabs .wp-block-themeisle-blocks-tabs__header {
    display: flex !important;
  }
  .wp-block-themeisle-blocks-tabs .wp-block-themeisle-blocks-tabs-item .wp-block-themeisle-blocks-tabs-item__header {
    display: none !important;
  }
}
```
Unfortunately, there isn’t another way to do it apart from the custom CSS. Let us know if it helps!
Thread Starter meenimee
(@meenimee)

1 week, 4 days ago

Thanks, I tried it and it puts the tabs like this

Tab1 Tab 2 Tab 3 Ta….

There is no way to scoll if you have more tabs than the screen can fit. Is there any way to show all the tabs or scroll the tabs?

Thanks!

Ivan
(@therealvanyek)

1 week, 2 days ago

Same problem, but pasting this CSS code breaks my website markup. Tabs block extending farther than it needs to. Why not just make tabs scrolling?

Plugin Support Vytis
(@bvytis)

6 days ago

Hi @meenimee,

Can you share URL to your page with CSS added to take a look and provide a fix?

Thanks!

Plugin Support luciamarinescu
(@luciamarinescu)

1 day, 15 hours ago

Hi @meenimee and @therealvanyek!

Adding the code below in the Additional CSS section within the Customizer should help display the tabs one below the other on mobiles.

@media(max-width: 768px) { .wp-block-themeisle-blocks-tabs__header { flex-direction: column !important; } }

I hope this helps!

Ivan
(@therealvanyek)

21 hours, 53 minutes ago

Huge thanks @luciamarinescu, it worked!

Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Views