Tabs breaking / wrapping as screen reduces

Find the width at which the layout breaks (I’d recommend testing in various browsers/configurations) and change the media query to change to the accordion view at a slightly larger dimension

The plugin documentation gives instructions in how to override the CSS.

change these values in the media queries setup might work for you:

max-width 767px change to max-width: 1197px (×2 instances)

min-width 768px change to min-width 1198px (×1 instance)

As you are using custom fonts, the tabs are out of alignment with the content and are positioned too high, if you’d like a suggestion of how to fix that, please turn off the minify option in W3 Total Cache as it is impossible to troubleshoot with the CSS minified.

thanks: minify is off (probably should stay that way) so yes, open to suggestions

Note: the Attitude Pro theme i am using is responsive (and i am not sure if I should be adjusting the widths as you’ve advised – and also haven’t found where I should do that

when i use the inbuilt theme option to change the CSS eg tab title size and color it seems to render that way when the page loads and then revert to default)

current CSS in place is

.responsive-tabs-wrapper .responsive-tabs__list__item {
    padding-bottom: 8px;
    padding-top: 8px;
line-height: 30px;
margin-bottom: 10px;
margin-top: 10px;
margin-right: 4px;
margin-left: 4px;
}

which was all in an attempt to stop overlaps that were way too close together… likely too many bits but i’ve not played with it enough yet (and have realised that this may be causing the issue in the first place)

The recommended way to customise the CSS for the plugin is to copy the content of the stylesheet included in the plugin into your child theme’s stylesheet. Then prevent the inbuilt stylesheet from loading by adding the following line into your child theme’s functions.php

<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>

Changing the responsive breakpoint for the elements generated by the plugin won’t cause any problems with your responsive theme.

The plugin was specifically designed to work with & play nice with responsive themes. The original version I built for using on sites for my own clients’ sites didn’t actually include a stylesheet as I was putting the CSS directly into the stylesheet. I added the stylesheet for the public release as a “get you started” measure for the plugin’s users with the intention that most people would want to use a tweaked version of the styles.

I’m still seeing the minified version of the stylesheet on your site, so its not possible to troubleshoot the tab layout issue yet. I’d guess you need to empty the cache.

done, sorry

where do I “change these values in the media queries setup” please?

You need to remove the original stylesheet by adding the ‘remove_action’ line I gave you earlier in this thread to your child theme’s functions.php:

<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>

And add the content of this pastebin to your child theme’s stylesheet or custom styles plugin:

https://pastebin.com/7C8tPGkb

This also includes a fix to correct the vertical alignment of the tabs in your theme

thanks very much… you are extraordinarily helpful for a free plugin!