Support » Plugin: Custom Product Tabs for WooCommerce » Make tabs horizontal on mobile?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hey @lshenefield,

    You could achieve that layout using flexbox with the following code:

    
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        display: flex;
        justify-content: space-between;
    }
    

    You should also consider taking the overflow-y: hidden; and the static height off of your tab area. Mobile user most likely won’t understand that is a scrollable area because I didn’t realize it was at first either. I was clicking the tabs and saw no change because the changes were hidden by the height and overflow properties.

    Cheers,
    Freddie

    Thank you – that helped a LOT!

    We’re alomost there… I would like the tabs to wrap to two levels on small screens. Is that possible?

    Thank you,

    Luke

    @lshenefield,

    Try using flex basis on the list items:

    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        flex-basis: 50%;
    }

    Not there yet! I’m sorry – are the flex styles contradicting each other?
    https://cbd.43designs.com/product/25-mg-cbd-isolate-breath-strips-by-curagenics/

    .woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    text-align: left;
    direction: ltr;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
    font-size: 16px;
    flex-basis: 50%;
    }
    .woocommerce-tabs {
    height: auto;
    }
    .woocommerce-tabs .tabs li > a {
    padding: 8px;
    }
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Make tabs horizontal on mobile?’ is closed to new replies.