Tabby Responsive Tabs
[resolved] Tabs breaking / wrapping as screen reduces (7 posts)

  1. danielsteeves
    Posted 2 years ago #

    Killer plugin - many thanks

    i have a lot of tabs, though and the responsive bit (as it gets smaller but before reverting to accordion) is problematic - the titles in the tabs break and wrap to a new line (see http://deriskthecloud.com/cloud-horrors-archive/)

    Anyone with a workaround for this?



  2. cubecolour
    Plugin Author

    Posted 2 years ago #

    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.

  3. danielsteeves
    Posted 2 years ago #

    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)

  4. cubecolour
    Plugin Author

    Posted 2 years ago #

    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.

  5. danielsteeves
    Posted 2 years ago #

    done, sorry

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

  6. cubecolour
    Plugin Author

    Posted 2 years ago #

    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:


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

  7. danielsteeves
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Tabby Responsive Tabs
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic