Disable auto play on mobile

Beaver Builder
1

Hello,

I have a content slider which auto expands the height to fit the text/images. On smaller devices this results in the page shifting up and down which is not very pleasant once the user scrolls down the page. As a solution I would like to disable the auto-play feature on smaller devices only. Can you point me in the right direction for achieving this? Thank you.

2

Hey Jessica,

Welcome to the BB forums! :slight_smile:

An easier way to get around your issue would be to set a fixed height to the slider when it reaches the small responsive breakpoint. Does that work for you? Do you think you can share the URL of the site in question so we can check? You can post it using the private reply option below if you need to.

Ben

3

[Content Hidden]

4

Hey Jessica,

Can you try adding a CSS Class to that module and the CSS snippet below and see if it works for you? Just change fl-custom-slide to the CSS class you’ve added.

@media (max-width: 767px) {
  .fl-custom-class .fl-slide .fl-slide-foreground .fl-slide-content-wrap {
    min-height: 430px;
    display: flex;
    align-items: center;
  }
}

Ben

5

Hi Ben,

I got this working by adding an !important declaration at the end of the max-width. Thanks =)

6

Ah, sorry about that! I didn’t realize you were using Dynamik. You can actually remove the !important declaration if you want, then change the CSS selector to .slideshow .fl-module-content .fl-slide .fl-slide-foreground .fl-slide-content-wrap. :slight_smile:

Anyhow, glad to hear it’s working. Enjoy BB!

Ben