Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 22, 2014 at 7:22 pm #339690
    Lilo

    Hello,
    I have a Fullsceen-Slider on my Homepage but it was to slow on mobile devices for my taste, so I turned it off using this code:

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
    .avia-fullscreen-slider {
    display: none !important;
    }
    }

    Is there a way to show an image instead on mobile devices only?

    Thank you!

    October 23, 2014 at 2:46 am #339903
    Ismael

    Hi Lilo!

    Thank you for using Enfold.

    Add an Image or Color Section element on top of the slider then add a unique css selector to any elements on the advance layout builder except for column layouts. Refer to this link for more info:
    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Edit the newly added element then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “hide-desktop”.

    You can add something like this on your custom.css or Quick CSS to hide the image on desktop view:

    /* All Mobile Sizes (devices and browser) */
@media only screen and (min-width: 767px) {
.hide-desktop {
display: none !important;
}
}

    Cheers!
    Ismael

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