Tabs and LI and A

Not quite sure how to describe this, since I am not the person who installed this plugin on the client’s site. (I just have a temporary solution.)

There is a widget for tabs that could use a little CSS tweak. The item has a class of uagb-tabs__panel uagb-tabs__align-left and contains a series of LI’s with class of uagb-tab. Each of those has an A HREF inside it with a class of uagb-tabs-list.

A client reported that people were having trouble using the tabs. Clicking on the text of the tab is the only way to make it work— but visually, people are clicking on the button/tab area that contains no text.

When I examined it, it appears that the LI element has padding on it, so while it appears that the element is something-you-can-click, in fact it’s only the A tag inside the LI that is clickable.

What I would suggest is that you alter the padding on the LI to NONE, and apply the padding to the A tag.

Below is the code that works as a fix, but the text is not center-aligned, unfortunately. At least, though, it will remove the padding from the LI and put it on the A tag, and then the interface is more useful. I leave it to some other more clever person to figure the centering part.

a.uagb-tabs-list {
    width: 100%;
    margin: 0 auto;
    border: 1px solid black;
    padding: 1em;
}

.uagb-tabs__wrap.uagb-tabs__vstyle6-desktop ul.uagb-tabs__panel .uagb-tab {
    border: none;
    padding: 0;
}

a.uagb-tabs-list:hover {
    opacity: .8;
    background-color: aliceblue;
    color: white!important;
}

The page I need help with: [log in to see the link]