Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 11, 2021 at 6:52 pm #1293791
    davead

    I’m having a hard time making a Tab Section work on mobile. Only the first three tabs are visible. Just by clicking on the third one the tab bar scrolls and reveals the fourth tab. This feels very unintuitive and I’m afraid the user won’t realise that there’s more content off the screen.

    I tried various fixes that were mentioned on here before but nothing seems to work.

    Any ideas how to solve this problem?

    April 13, 2021 at 12:07 pm #1294086
    Ismael

    Hey davead,

    Thank you for the inquiry.

    The next tabs will only display when the user clicked on the very last visible tab, but if necessary, we could adjust the width of the tab titles with css to show the hidden tab titles partially, letting the user know that there are more tabs.

    .av-inner-tab-title, .av-tab-section-icon, .av-tab-arrow-container, .av-tab-section-image {
    width: 70px;
}

    And add this css code to align the title to the left instead of center.

    .av-tab-section-tab-title-container {
    text-align: left;
}

    Move the css inside this css media query if you want to only apply them on mobile view.

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */

}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.