Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 11, 2018 at 7:29 pm #1043931
    FloppySocks

    Hello Kriesi support,

    Please look at my page: https://bardac.com/ac-drives/p2-vector-drives-new/

    This page looks fine on desktop, but on a mobile screen, the layout appears broken. The contents of the current tab are displayed, however a portion of the next tab’s contents are also displayed. It looks broken. I’d like for the currently selected tab’s contents to be the only visible items on the page, with the other tabs appearing only when they are selected.

    Is there any way to make this happen? It seems odd to display the next tab’s contents like it currently does….

    Thanks for your help,
    Julian

    December 12, 2018 at 10:11 pm #1044523
    Victoria

    Hey FloppySocks,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 990px) {
  .av-tab-content-auto .av-layout-tab-inner {
    width: 100vw !important;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    December 13, 2018 at 8:54 pm #1045024
    FloppySocks

    Fantastic, thanks for your help Victoria.

    Putting the code snippet into Quick CSS did not work, however inserting it into custom.css seemed to do the trick. Now, I am not using a child theme…will this file remain untouched when I update Enfold, or will I have to utilize a child theme to ensure these changes are not overwritten?

    Thanks for your help,
    Julian

    December 14, 2018 at 12:33 am #1045077
    Jordan Shannon

    Hi,

    It would be best to utilize a child theme if you are not putting it into quick css.

    Best regards,
    Jordan Shannon

    December 17, 2018 at 5:46 pm #1046397
    FloppySocks

    Ok sounds good. I will try to implement that soon. Another question regarding this topic…is it possible to turn off the swipe navigation for the tab layout in mobile? If you visit the mobile version of the page I linked previously, then select “DIMENSIONS”, you will see I have the table set to scroll on mobile because it is too big to display comfortably on smaller screens. But when swipe to control tab navigation is used on mobile, I can no longer scroll through the table without swiping into the next tab. Hopefully this makes sense.

    Thanks for the help!
    – Julian

    December 20, 2018 at 7:46 pm #1047905
    Basilis

    Hi,

    Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Basilis

    December 21, 2018 at 5:55 pm #1048251
    FloppySocks

    Hi Basilis,

    Thanks for your reply. What about this thread? https://kriesi.at/support/topic/tab-section-remove-swipe-on-mobile/

    It seems like it is possible. I just searched through that file and the line of code mentioned in that post no longer appears in shortcodes.js. Do you know where it is located now?

    Thanks again,
    Julian

    December 21, 2018 at 8:48 pm #1048339
    Victoria

    Hi Julian,

    That code moved to this file here
    /enfold/config-templatebuilder/avia-shortcodes/tab_section/tab_section.js

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

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