Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author cubecolour

    (@numeeja)

    It looks like your theme is forcing bullets onto the list items used in the tab markup, overriding the default tab styles. This is rare, but I have seen CSS in commercial themes causing this problem before.

    You should be able to fix this by adding a CSS rule to your custom styles to override the list-style to ‘none’ with greater specificity than the rule forcing its own list-style.
    eg:

    .entry-content .responsive-tabs .responsive-tabs__list__item {
    	list-style: none;
    	font-size: 16px
    }

    The font-size rule will help prevent the tabs going to two rows at smaller viewport widths just greater than the responsive breakpoint.

    If you need more flexibility in how the tabs are displayed, the optional customiser add-on for Tabby Responsive Tabs allows you to easily style the tabs without editing any code, and includes a one-click option to automatically include the increased specificity for themes that exhibit this issue.

    Thread Starter maansacdalan

    (@maansacdalan)

    It worked! I added the styles to my custom css.

    Thanks so much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Tabs are only working on smaller screens’ is closed to new replies.