Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 17, 2017 at 4:24 am #734462
    mterrian

    Hello there,
    We are using the newest version of Enfold and using a 5-panel accordion slider on the home page.
    On mobile devices, this is really unusable. The previews are too narrow and nothing looks good.

    I know that I can turn if off on mobile, but I thought I’d ask a question first:

    Is there a way via CSS that comes to mind that would allow me to show:
    1) the whole normal accordion on desktop/laptop, and
    2) a single pane of the accordion on mobile? Or even a separate image unrelated to the accordion?

    My thought is there is some kind of use of “display:none” that could be used to toggle the two things…but I’m unsure.

    Anything come to mind? Thanks so much for all you do!

    January 17, 2017 at 9:33 am #734592
    Rikard

    Hey mterrian,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    January 17, 2017 at 7:12 pm #734924
    mterrian

    Hi Rikard, thanks for getting back to me so quickly. You guys are awesome.

    I’ll post a link in the private comments for you. I know there must be some way to have an element be display:none on the mobile widths, and have another element be display:none on the “normal” version of the page, right? I’m not 100% sure.

    January 20, 2017 at 6:32 am #736223
    Ismael

    Hi,

    Yes, this is definitely possible. We actually have it documented in the following link.

    // http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    First, you need to turn on the custom css class field then edit the elements that you want to display or not display on mobile or desktop. Add the corresponding selector as instructed in the documentation.

    Best regards,
    Ismael

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