1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Tab module on mobile

Discussion in 'Free Divi Community Forum' started by RobertaCin, Apr 27, 2020.

  1. RobertaCin

    RobertaCin Member

    Dear Divi Helpers,

    have you ever had the TAB module issue showed in the pic on mobile?

    Basically the actual description of the first tab goes at the bottom of the list appearing to be actually the description of the last one.
    Arrows in the screenshot hope explain what I mean?

    thanks
     

    Attached Files:

    #1 RobertaCin, Apr 27, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Basically, the description will always be at the bottom of the list. Or perhaps I misunderstood what you're saying.

    You may refer the tab module demo & see if it's normal behavior of what you're describing: https://www.elegantthemes.com/preview/Divi/tabs/
     
    #2 Divi.Help, Apr 27, 2020
  3. RobertaCin

    RobertaCin Member

    I understand but I am afraid I consider this UX not great.

    Is there any way to align horizontalilly tab titles? (make them on mobile the same as they are on desktop and tablet basically)
    thanks
     
    #3 RobertaCin, Apr 27, 2020
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    You may try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    If not, you may look to use accordion module.
     
    #4 Divi.Help, Apr 27, 2020
  5. RobertaCin

    RobertaCin Member

    .et_pb_tabs_controls li {
    float: left!important;
    }

    the above works but needs to be adjusted to make appear the titles in one row

    could it work something similar to the following?

    @media only screen and (max-width: 479px) {
    .equal-tabs .et_pb_tabs_controls li {
    width: 25%!important;
    text-align: left;
    }
    }

    thanks a lot once again
     
    #5 RobertaCin, Apr 27, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Yes, if you have the equal-tabs CSS Class in your tab module.

    I would suggest to add display: table!important; as well.

    @media only screen and (max-width: 479px) {
    .equal-tabs .et_pb_tabs_controls li {
    width: 25%!important;
    text-align: left;
    display: table!important;
    }
    }

    And you will need to adjust the percentage based on number of tabs. And adjust the breakpoint to fit your need.
     
    #6 Divi.Help, Apr 27, 2020
(You must log in or sign up to post here.)