Tagged: , , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 22, 2014 at 12:08 pm #294282
    StuWeTueHo

    We did some usability tests and a few users complained about the tab behaviour on mobile view. When the device is smaller than 768 px, the tabs work “like accordions” and by default the first tab is opened. This moves the other tabs below the content of the first tab, which is not that user friendly in some cases.

    Example: I have three tabs with three different locations: On desktop it is no problem for a user to just click the desired location. On mobile devices the user has to scroll past the entire first tab content (which is quite a lot in my case) to select location 2 or location 3.

    Is it possible to set the first tab as “closed” when on mobile devices (Similar to the accordion feature, where you can set if one toggle should be open by default)?

    Thank you.

    July 23, 2014 at 6:27 am #294785
    Ismael

    Hi StuWeTueHo!

    Thank you for using the theme.

    Do you mind if we take a look at the actual website? Make sure that you remove browser cache before testing because you might leave the tab id on the url and this will open the corresponding tab automatically.

    Best regards,
    Ismael

    July 23, 2014 at 9:03 am #294818
    StuWeTueHo

    Hey Ismael,

    sorry I can`t give you an account at the moment as our developper platform is IP restricted. But I don´t think it is necessary to have a look at our page since the problem is obvious.

    Maybe to clearify: Have a look at http://kriesi.at/themes/enfold/shortcodes/tabs/ and just imagine having lots of content in your first tab. If you now switch to mobile view, you have to scroll past the entire first tab content to reach the other tabs.

    Other themes, e.g. Salient (Tabs) or Avada (Tabs) provide a solution, where all tabs sit above the actual content. This might be a solution, but I would prefer having “closed toggles” for mobile view (below 768 px).

    Thanks for your support.

    July 25, 2014 at 2:26 am #295750
    Josue

    Hi,

    Try adding this at the very end of your theme functions.php file:

    function add_custom_script(){
?>
<script>
jQuery(window).load(function(){
	if(jQuery.avia_utilities.isMobile){
		jQuery('.tab').removeClass('active_tab');
		jQuery('.tab_content').removeClass('active_tab_content');
	}
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    Regards,
    Josue

    August 1, 2014 at 10:56 am #298652
    StuWeTueHo

    Hey Josue,
    thanks for having a look. unfortunately the provided code doesnt`t work. Any other ideas?
    Is it possible to copy the code to my child theme as well?

    Thanks

    August 1, 2014 at 7:12 pm #298893
    Josue

    Hi!

    Have you tested it on an actual mobile device (resizing the browser won’t do it)? and yes, you can put the code in your child theme functions.php.

    Regards,
    Josue

    December 31, 2014 at 2:47 am #373393
    Asterios

    I totally agree with StuWeTueHo!

    The tabs should be visible on mobile devices without having to scroll down. Maybe being next to each other, not on top of each other.
    Have you found any solution to that? If yes, I would love to use it too.

    Best Regards
    Asterios Georgiou

    January 5, 2015 at 12:37 am #374828
    Josue

    Hi Asterios!

    Did you try the code i posted here?

    Regards,
    Josue

    January 5, 2015 at 1:01 am #374832
    Asterios

    Hi Josue and thank you for your support!

    I just tried it and the code does bring the tabs on top of each other. Unfortunately they are all closed, but it´s better than before.
    The best would be to see them next to each other, anyway I can live with this solution for the moment. It might change in the future…

    Could I ask something else here or do I need to open another ticket?
    It is about the background image in a colour section. On mobile devices it is not responsive and because of that, texts get their colour changed!

    Have a look here:

    http://test.koelner-musikakademie.de/dozenten

    Best regards
    Asterios

    January 5, 2015 at 8:51 pm #375309
    Andy

    Hey!

    would be best to open a new ticket for the new question and please provide us screenshots of the issue.

    Regards,
    Andy

    October 1, 2015 at 3:48 pm #512228
    richardelectrix

    This solution is quite good, but it doesn’t function like a tab. It acts as a closed slider.

    How can it function like a tab like on the desktop size screen?

    October 1, 2015 at 10:47 pm #512467
    Josue

    Hey!

    That’s the intended -default- behavior of Tabs for mobile (without mods), there’s a way to make Tabs work as desktop on all screen sizes but it requires modifying css/shortcodes.css, look for this piece of code and remove it:

    @media only screen and (max-width: 767px)  {
	.responsive .tabcontainer{border-width: 1px; border-style: solid; border-top:none; overflow: hidden;}
	.responsive .tabcontainer .tab_titles{display:none;}
	.responsive .tabcontainer .tab_content, .responsive .tabcontainer .tab
	{width:100%; max-width:100%; border-left:none; border-right:0;left:0; top:0; min-height: 0!important;}
	.responsive .tabcontainer .tab_content{border-bottom:none; padding:15px 30px; clear: both; }
	.responsive .tabcontainer .tab.fullsize-tab{ display:block; margin-bottom:-1px;}
	.responsive .top_tab .tab.fullsize-tab{ margin-bottom:0px;}

}

    Regards,
    Josue

    November 28, 2015 at 1:57 pm #543935
    marcelwachter

    hello,

    is it possible to have all tabs opened on mobile? Many users seem to ignore the second tab.

    November 28, 2015 at 9:35 pm #544010
    Basilis

    Hi!


    @marcelwachter

    That can be done, only with hard modification on the theme, or by removing the tabs design on mobile and present that content, with an other way.
    Everything is possible, but that would need a lot of work to be done.

    You can contact one of our Customization Contractors, who will help you out with the process.
    http://kriesi.at/contact/customization

    Let us know if we could do anything else, regarding our theme

    Best regards,
    Basilis

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