Use Tabs instead of Accordion in Mobile View

  • Resolved nonick

    (@nonick80)


    4 years, 2 months ago

    Hi, is it possible to display the tabs (just like in desktop view) on mobile view instead of accordions? If yes, how do I do that? Look forward to hearing from you!

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author cubecolour

    (@numeeja)

    One way to achieve is to use a custom set of CSS rules based on the default rules but with the media query rules for mobile removed – see the plugin documentation for details of how to use custom styles.

    Alternatively if you have the optional tabby responsive tabs customiser add-on you achieve this by setting the responsive breakpoint option to a very high value, eg 9999.

    Thread Starter nonick

    (@nonick80)

    Thanks for the pointers. Managed to get the tabs to work in mobile view by changing the CSS as you said. Here are my CSS modifications.

    @media (max-width: 767px) {

    .responsive-tabs .responsive-tabs__list {
    display: block!important;
    }

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

    .responsive-tabs-wrapper {
    clear: both!important;
    margin-bottom: 20px!important;
    zoom: 1!important;
    border-top: 0!important;
    }

    .responsive-tabs .responsive-tabs__panel {
    border: 1px solid #ddd!important;
    border-top: 1px solid #ddd!important;
    -webkit-border-radius: 0px!important;
    -moz-border-radius: 0px!important;
    border-radius: 0px!important;
    -webkit-border-top-left-radius: 0px!important;
    -moz-border-radius-topleft: 0px!important;
    border-top-left-radius: 0px!important;
    clear: left!important;
    margin-bottom: 0!important;
    padding: 20px 20px 0!important;
    word-wrap: break-word!important;
    }
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Use Tabs instead of Accordion in Mobile View’ is closed to new replies.