Tabs on mobile in the top

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!

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!

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?

Hi @meenimee,

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

Thanks!

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!

Huge thanks @luciamarinescu, it worked!

Thank you very much @luciamarinescu & @bvytis

I looked at the code and I managed to get the vertical tabs to scroll by adding the code below…

@media (max-width: 800px) {
.wp-block-themeisle-blocks-tabs .wp-block-themeisle-blocks-tabs__header {
display: flex !important;
overflow-x: auto !important;
}
.wp-block-themeisle-blocks-tabs .wp-block-themeisle-blocks-tabs-item .wp-block-themeisle-blocks-tabs-item__header {
display: none !important;
}
}

Hi @meenimee,

I’m glad to hear that! Thanks for sharing your solution with the community!