How to make tabs full width

Hi @wrathyimp,

I need to make the tabs, full width filling the spaces on the left & right sides.

I’ve updated the help article, look for the “Full-width tabs” section.

Also I tried the Tabs active CSS, is doesn’t work, as its overwritten by the “Tab, any state” (https://docs.getshortcodes.com/article/86-how-to-customize-tabs-shortcode).

Order of code snippets matter. The lower your code placed, the higher it’s priority. Place your “hover” related code lower than “any state” related.

• This reply was modified 6 years ago by Vova.

Thanks for the update on full width.

I am using the same order as listed in the article:
Tab, any state
Tab, inactive state
Tab, on mouse over
Tab, active state
Tab, active state, on mouse over

So Shall I move the “Tab, any state” at the bottom or rearrange the order that fits the need?
Tab, active state
Tab, active state, on mouse over
Tab, on mouse over
Tab, inactive state
Tab, any state

Thanks

The order in the article is correct. If you stick to it, then CSS should work as expected.

Could you share the link of your page with tabs?

Currently its local on my PC, I can share the screen capture of it, along with the custom css code.

Use the following terminal command to save the complete page:

wget -p -k https://www.example.com/

How to upload the complete page html file?
The below is the custome css configured:

<!-- Shortcodes Ultimate custom CSS - start -->
<style type="text/css">
/*Full-width*/
@media screen and (min-width: 768px) {
  .su-tabs-nav {
    display: flex;
  }
  .su-tabs-nav span {
    flex-basis: 100%;
    text-align: center;
    font-size: 16px;
    padding: 16px;
  }
  .su-tabs-nav span:last-child {
    margin-right: 0;
  }
}
/*Tab, inactive state */
.su-tabs > .su-tabs-nav > span:not(.su-tabs-current) {
  /* Background color */
  background-color: #34619f;
  /* Text color */
  color: #fff;
  /* Text size */
  font-size: 16px;
/*Text Vertical Center*/
    display: inline-block;
    align-items: center;
}/*Tab, on mouse over*/
.su-tabs > .su-tabs-nav > span:hover {
  /* Background color */
  background-color: #1a4887;
  /* Text color */
  color: #fee100;
  font-size: 16px;
/*Text Vertical Center*/
    display: inline-block;
    align-items: center;
/*Padding*/
padding: 16px;
}
</style>
<!-- Shortcodes Ultimate custom CSS - end -->

I cannot get the Current tab to have the text color #fee100, and remove the hove effect. As its hovering on all the tabe (active + inactive).

There are no active state declarations in your code. Use the following selector to adjust the selected state:

.su-tabs > .su-tabs-nav > span.su-tabs-current {

  /* Background color */
  background-color: #ffcc00;

  /* Text color */
  color: #00ffcc;

}

Thanks, But how can I disable hover effect from the active tab (current tab).

Hover state is defined in your code.

.su-tabs > .su-tabs-nav > span:hover {
  /* Background color */
  background-color: #1a4887;
  /* Text color */
  color: #fee100;
  font-size: 16px;
/*Text Vertical Center*/
    display: inline-block;
    align-items: center;
/*Padding*/
padding: 16px;
}