WooCommerce Product Tab Mobile View Issue

[VitalityCBD]

Howdy,

Is there anything anyone can see that would be causing the tabs on my products to appear at half-width in mobile view?
Is there any global CSS fix I can apply of the backend to resolve all product pages to have full-width tabs on mobile view?

Product Page as Example: https://vitalitycbd.com/buy/cbd-isolate-powder-1-gram/

All my extensions, themes, and plugins are all up-to-date. The suggestion I was given previously was about out-of-date themes. So it wasn’t particularly relevant as far as fixes go. I still need a resolution to this issue.

Thank you!

[ruenel]

Hello Jesse,

Thanks for writing in!

This issue happened right after you have added this custom css:

.x-nav-tabs.four-up>li{
  width:33.33339%;
}

To resolve this issue, please have it updated and use this instead:

@media(min-width: 980px){
  .x-nav-tabs.four-up>li{
    width:33.33339%;
  }
}

This means that you custom code will only affect on larger screens and in smaller screens the tab nav items will be fullwidth.

Hope this helps. Please let us know how it goes.

[VitalityCBD]

Thank you!
That fixed it immediately!
you’re the best!

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.