Tab section responsive

Hi limedrop,

It’s possible, try to add this CSS code in Enfold > General Styling > Quick CSS:

@media only screen and (max-width:767px) {
    #top .av-tab-section-container .av-tab-section-tab-title-container {
        display: flex;
        flex-direction: column;
        min-width: 100% !important;
        left: 0 !important;
    }

    #top .av-tab-section-container .av-active-tab-title {
        background-color: rgba(0,0,0,0.2);
    }

    #top .av-tab-section-container .av-tabsection-arrow,
    #top .av-tab-section-container .av-tab-arrow-container {
        display: none;
    }
}

Hope it helps.

Best regards,
Nikko

Hi limedrop,

Unfortunately that’s not possible however I think you can make a workaround by hiding that Tab Section completely on mobile then use an Accordion and make it visible only to mobile.
If you want to stick with the Tab Section for mobile, then please replace the last code I gave with this one so reduces the top and bottom padding of the headings:

@media only screen and (max-width:767px) {
    #top .av-tab-section-container .av-tab-section-tab-title-container {
        display: flex;
        flex-direction: column;
        min-width: 100% !important;
        left: 0 !important;
    }

    #top .av-tab-section-container .av-active-tab-title {
        background-color: rgba(0,0,0,0.2);
    }

    #top .av-tab-section-container .av-outer-tab-title {
        padding: 0;
    }

    #top .av-tab-section-container .av-outer-tab-title .av-inner-tab-title {
        text-align: left;
    }

    #top .av-tab-section-container .av-tabsection-arrow,
    #top .av-tab-section-container .av-tab-arrow-container {
        display: none;
    }
}

Best regards,
Nikko