Extra showing on Tabs

Resolved thecouponingouple
(@thecouponingouple)

8 years, 2 months ago
On posts where I have tabs that are “in the loop” I am getting a normal <li> in front of each tab, and it should not be there. For tabs oustide the loop, at the top of the tag or category page for example, the tabs look fine.

Any help would be appreciated.

URL of Tabs that are wrong: http://www.thecouponingcouple.com/publix-ad-with-coupon-matchups-for-1-11-to-1-17-18-1-10-to-1-16/

URL where tabs show fine outside the loop: http://www.thecouponingcouple.com/category/publix/weekly-ad/

Thanks
- This topic was modified 8 years, 2 months ago by cubecolour. Reason: added code tag to list item tag
The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author cubecolour
(@numeeja)

8 years, 2 months ago
The bullets appear to be added in a non-standard way by your theme, overriding the tabby styles.

You can check this by temporarily switching to a default theme such as twenty-seventeen.

You will need to add some additional CSS rules with greater specificity to override the theme’s rules eg to ensure the graphic bullets are not added to the tab:
```
.grt .post_content .responsive-tabs ul> li::before {
    content: '';
    display: none;
}
```
You will probably also need to add some other rules to similarly correct for styles in the theme that affect the dimensions & position of the tabs/tab content.
Thread Starter thecouponingouple
(@thecouponingouple)

8 years, 2 months ago

Thanks,

I tried the fix.. and it worked in removing that extra list item.. It also removed all bullet points in the tabs. 🙂
Plugin Author cubecolour
(@numeeja)

8 years, 2 months ago
If there are bullets inside the tabs that need to be kept, you can add the ‘immediate child’ > selector after the .responsive tabs inthe selector to specify that only the list items in the tabs are affected:
```
.grt .post_content .responsive-tabs > ul > li::before {
    content: '';
    display: none;
}
```
Plugin Author cubecolour
(@numeeja)

8 years, 2 months ago
Update:

Try the following CSS rules to override the styles in the theme that break how the tabs display:
```
.grt .post_content .responsive-tabs > ul > li {
    margin: 0;
    padding: 10px 12px;
}

.grt .post_content .responsive-tabs > ul > li::before {
    content: '';
    display: none;
}
```

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Extra showing on Tabs’ is closed to new replies.