Change Backgound Carrusel For Mobil

Beaver Builder
1

Hello guys!

I hope you are doing great!

I want to change the images displayed with a carrusel in the background of a row for mobile devices. I want to use a plain color instead. This is the page weebir.com and the first row is the one that I want to edit.

I am following the instructions here:

http://forum.wpbeaverbuilder.com/knowledge-base/change-row-background-image-on-mobile-view/

But I dont get the results I want.

Could you please let me know how to do this correctly?

Thank you!

2

Hey Carlos,

Sorry to say, but the code above only works for background images. Try using the CSS snippet below instead and see if it works. You’ll need to place a custom class to the row you want this to apply to. On the code below, the custom class is first-row.

@media (max-width: 767px) {
  .first-row .fl-row-content-wrap {
    background: red;
  }
  .first-row .fl-bg-slideshow {
    display: none;
  }
}

Ben

3

Hello Ben!

Thank you for your reply and for the snippet!

It is working perfectly. :wink:

Is there an easy way to create a different slideshow for the mobil view?

Thank you!

4

Hey Carlos,

You can always duplicate the row and set one to show on large/medium devices, the other to show on small devices, then set their backgrounds as such. That would be the easiest way around it. :slight_smile:

Ben

5

Ha!

That was too easy I dont even know how I didnt think of it before.

Thank you very much for your help Ben!

Have a great day!

6

No worries at all, Carlos! Enjoy! :slight_smile:

Ben