Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 28, 2017 at 2:54 pm #882704
    tl_s180

    Hi,
    I’ve just updated to enfold 4.2 hoping I can use horizontal gallery on mobile now.
    It doesn’t seem to be optimized yet.

    Is it possible to make it look like a fullwidth easy slider on mobile? .. With arrows and dots
    Is there a temporary workaround to make it usable?
    Or will it be improved in a coming enfold update?

    For now the best option seems to be to hide the horizontal gallery on mobile and display an additional easy slider (only on mobile). It will work but the duplicate content isn’t the most elegant solution.

    November 28, 2017 at 4:29 pm #882747
    Yigit

    Hey,

    We have in fact improved horizontal gallery’s behaviour on mobile with Enfold 4.2. Could you please post a link to your page where you have your element so we can inspect it?

    Best regards,
    Yigit

    November 28, 2017 at 4:38 pm #882753
    tl_s180

    Link in private Content

    November 28, 2017 at 6:20 pm #882800
    Yigit

    Hi!

    Please remove following code from Style.css file of your child theme 

    @media only screen and (max-width: 767px) {
.avia-slideshow-arrows {
    display: none;
}}

    Cheers!
    Yigit

    November 28, 2017 at 6:59 pm #882831
    tl_s180

    Ah ok, it’s better now
    Addition dots would be great -> maybe in future update? ; )

    I’ll go with this instead of a duplicate module for mobile view.
    At some point I decided to hide all slideshow arrows on mobile and only use the dots to indicate it’s a slider, because they are so big. Maybe I try to make the arrows smaller and closer to the borders. Surely there’s some posts in the forums how to do that.

    November 28, 2017 at 7:17 pm #882841
    Yigit

    Hi,

    If you still would like to hide arrows on certain elements, please go to Enfold theme options > Layout Builder and check “Show element options for developers” and then edit your element and give it a custom CSS class (“my-custom-class” in example below) and then add following code to Quick CSS field in Enfold theme options > General Styling tab

    @media only screen and (max-width: 767px) {
.my-custom-class .avia-slideshow-arrows {
    display: none;
}}

    You can edit your element and change the arrows. If you need further assistance, please feel free to let us know :)

    Best regards,
    Yigit

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