Tagged: , , ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • September 14, 2017 at 4:11 pm #852135
    npmcgrew

    Hello,

    I used the Tab Section (from the 2017 demo) to create an overview of our product offerings and love the way it looks on desktop.

    However, when I look at it on mobile, it’s a bit cumbersome and users need to select the next tab for another to become visible. Is there anything I can do for this to be a bit clearer? I don’t mind creating a number tab section just for smaller screens, but am unsure of how to format it or what CSS to apply to make it look a bit cleaner.

    Or should I use a different element altogether for mobile?

    I use the following CSS as there were only 4 headings for the tab section, not sure if this is having an effect on mobile:

    .av-tab-section-image {
    width: 160px !important;
    }

    .av-tab-arrow-container {
    width: 160px !important;
    }

    .av-inner-tab-title {
    width: 160px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    font-align: center !important;
    }

    Desktop Tab Section

    Mobile Tab Section

    September 17, 2017 at 6:40 pm #853106
    Mike

    Hey npmcgrew,
    Sorry for the late reply, I’ve been trying to come up with a good solution for you. How about using the Accordion element for mobile only? Using the screen options you can hide the tab element for mobile & hide the Accordion element for tablets and desktops.

    Best regards,
    Mike

    February 5, 2018 at 4:38 am #907669
    enoteware

    Hello,
    I would love a mobile solution for this as It’s a super useful way to sort massive product categories.

    February 5, 2018 at 6:50 am #907764
    Nikko

    Hi enoteware,

    Can you try to do what Mike suggested for now? but please feel free to request such feature at our feature request system: https://kriesi.at/support/enfold-feature-requests/

    This system allows us to keep track of user suggestions and lets you vote on the feature you would like to see the most. I am afraid though there is no guarantee that a feature will get implemented.

    Best regards,
    Nikko

    March 14, 2018 at 12:44 am #926348
    betaphase

    Guys the tabs section feature should never have been released without “swipe” functionality for mobile – the shear volume of threads on this topic proves this to be true, This should get immediate attention as a bug fix instead of simply directing all complainants to a feature request page. Don’t get me wrong, the tab section is awesome on desktop but without swipe for mobile, it’s sort of a dud because the user sees them and intuitively wants to swipe over them to advance or retreat.

    • This reply was modified 6 years, 9 months ago by betaphase.
    March 15, 2018 at 2:34 pm #927348
    Ismael

    Hi,

    The tab sections are already swipeable on version 4.2.6. if you don’t have the latest version, edit the js > shortcodes.js file, replace everything with this code.

    // https://pastebin.com/U1hu8dPZ

    Best regards,
    Ismael

    March 20, 2018 at 11:08 am #929704
    Rene Hoj

    Hi… I’m on 4.2.6 and the swipeable tabs doesn’t work when swiping on the tabs only when swiping on the content. I tried copying the code, but same result.

    • This reply was modified 6 years, 9 months ago by Rene Hoj.
    March 21, 2018 at 6:36 am #930342
    Victoria

    Hi Rene Hoj!

    At this point, this is the intended behavior: The content can be swiped, but the tab titles need to be tapped.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    April 24, 2018 at 3:58 pm #945990
    joax

    Weird choice

    July 30, 2019 at 2:28 pm #1123151
    samurai_666
    This reply has been marked as private.
    July 31, 2019 at 10:22 am #1123485
    Victoria

    Hi Gerhard,

    Could you please attach some screenshots of the issue?

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    August 6, 2019 at 10:46 am #1125044
    samurai_666

    Hi Victoria!
    Referring to my mail:
    1. All buttons at a glance is now fine!
    2. content overlapping of tabs: I har uploaded a picture at

    View post on imgur.com


    3. acess to website in private content.

    Thank you Victoria!

    August 8, 2019 at 6:05 am #1125761
    Mike

    Hi,
    Sorry for the late reply, and thanks for the login. Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 760px) { 
.av-layout-tab-inner .one_sixth #attachment_5233.wp-caption {
	width: 100% !important; 
}
.av-tab-section-inner-container {
    width: 500vw;
    justify-content: space-between;
    display: flex !important; 
}
}

    If this interferes with other tab sections on your site then we can add a page class to the rules so it will only target this one element.
    Please clear your browser cache and check.

    Best regards,
    Mike

    August 8, 2019 at 8:53 am #1125831
    samurai_666

    Hi Mike!
    Worked fine!
    best regards
    Gerhard

    August 8, 2019 at 12:31 pm #1125921
    Rikard

    Hi Gerhard,

    Great, I’m glad that Mike could help you out :-)

    Best regards,
    Rikard

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