• Resolved meenimee

    (@meenimee)


    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)

    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)

    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)

    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)

    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)

    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)

    Huge thanks @luciamarinescu, it worked!

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.