Not working on mobile

The problem appears to be caused by a CSS rule you have added in your custom_css.css:

.tabtitle.responsive-tabs__heading{
display: none !important;
}

What was the reason for this rule to be added? What happens if you remove it?

I see.

When I remove the CSS rule, the tabs and accordion are displayed at the same time on some of my pages but not others.

Page with tabs and accordion displayed at the same time:
https://movemankind.com/2015/07/16/oas1s/

Page with normal display:
https://movemankind.com/portfolio_page/mankind/

Thank you for your support.

Cheers,
Ruby

Some troubleshooting steps are needed to find the cause of this.

Does it appear the same if you remove your custom styles & use the default tabby stylesheet instead?

Do you still get the tab & accordion ‘double’ display if you temorarily change the theme to the default twentyfifteen theme? if so does it still appear like that with all other plugins temoraryily deactivated?

Does it appear the same if you remove your custom styles & use the default tabby stylesheet instead?
Yes

Do you still get the tab & accordion ‘double’ display if you temporarily change the theme to the default twentyfifteen theme?
No

FYI, the page that displays normally uses my theme’s Portfolio page type whereas the ‘double’ display appears on Post page types.

ok it looks like it may be something in the theme that is causing the plugin to break, but I have a few more questions that may help indicate what is causing this:

Is it a themeforest theme?
Has the theme been customised?
Do the tabs still appear broken if all plugins are temporarily deactivated except Tabby Responsive Tabs
What tabby shortcodes & tab content are used on the broken page?

Is it a themeforest theme? Yes, it is Qode’s Bridge theme.

Has the theme been customised? Yes. These are the css codes:

.qbutton.green, .qbutton.white {
  background-color: rgba(0,0,0,0) !important;
}

.cf7_custom_style_1.input.wpcf7-form-control.wpcf7-text{
    color: #000000 !important;
}

@media only screen and (max-width: 768px) {
    .q_slider .carousel, .qode_slider_preloader, .carousel-inner>.item{
        height: 670px !important;
    }
}

@media only screen and (max-width: 480px) {
   .q_slider .carousel, .qode_slider_preloader, .carousel-inner>.item{
        height: 650px !important;
    }
..wpcf7-form-control.wpcf7-submit{
 max-width: 280px !important;
}
}

.portfolio_excerpt {
   font-size: 14px;
   line-height: 20px;
   color: black;
   padding-top: 10px;
}

.q_slide_text a {
    color: #ffffff !important;
     text-decoration: none !important;
     position: relative;
     font-style: italic;
}
.q_slide_text a:hover {
    color: #ff1f00 !important;
}

.esg-filter-wrapper.dropdownstyle {
min-width: 200px;
}

.minimal-light .esg-filterbutton, .minimal-light .esg-navigationbutton, .minimal-light .esg-sortbutton, .minimal-light .esg-cartbutton a{
border: none !important;
}

.flat-light .esg-filterbutton{
min-width: 180px;
text-align: left;
padding-left: 0px !important;
padding-right: 0px !important;
margin-left: 0px !important;
margin-right: 0px !important;
}

.esg-filter-checked{
margin-right: 5px;
}

.a.eg-discoverall-element-3, .eg-triggerfilter{
text-decoration: none !important;
}

 .responsive-tabs__list__item{
font-size: 14px !important;
text-transform: uppercase !important;
font-weight: 700;
letter-spacing: 1px;
}

Do the tabs still appear broken if all plugins are temporarily deactivated except Tabby Responsive Tabs? Yes, if the Bridge theme is activated.

What tabby shortcodes & tab content are used on the broken page? The broken page and the functioning page both have the shortcodes below. I have tried the example shortcodes provided here (https://www.ads-software.com/plugins/tabby-responsive-tabs/) as well.

<a id="tabs"></a>
[raw]

[tabby title="First Tab"]
hkhkj

[comment template]

[tabby title="Second Tab"]

[loop type=post name=oas1s-tab-2]

[comment template]

[/loop]

[tabby title="Third Tab"]

sleep in the sink climb the curtains attack, give me fish.

[tabbyending]

[/raw]

What are the various shortcodes for?

[raw]
[comment]
[loop]

Are these used by the theme or plugins? If plugins, which ones?

Are the tabs still broken if you take these out of the equation?
– ie just use the [tabby] & [tabbyending] shortcodes with text as the content

I’ve had another look and I think I’ve found the problem in your theme’s stylesheet.

For some inexplicable reason, the stylesheet.min.css contains the rule:

.blog_holder.blog_single article h2 {
	display: block
}

I can’t see why this rule would be necessary as any h2 would be a block element by default.

The h2 elements in a tabgroup need to be hidden in the tab view but the rule in the tabby stylesheet that does this this was being overridden by the rule in the theme.

Try adding the following rule to your CSS to override the overriding style:

@media (min-width: 768px) {
	.blog_holder.blog_single article h2.tabtitle {
		display: none;
	}
}

I believe that rule was implemented by the theme.

The code you provided has fixed the problem. Thank you very much!

It always seems to be themeforest themes that do daft things like this for some reason. The stylesheet is also littered with rules including the !important declaration – which is often an indication of a poorly planned theme where the default specificity is too confusing for even the theme designer to work out.

If you have a moment, feel free to leave a review of the plugin.