Change Row Background Image on Mobile View

Beaver Builder
1

Hi, I am using this code toa change row background image in mobile view but nothing happens:
In stead of this sample url I have my own…I am using 17 beta2.

/* Change background image on mobile view*/
@media (max-width: 767px) {
.fl-content .first-row .fl-row-content-wrap {
background-image:url(http://www.domain.com/mobile-background.jpg);
}
}

2

Hi Johannes,

I think the issue with your CSS, is the classes you’re using. It’s difficult without seeing the issue first hand. However, I believe you only want one row to change. If this is the case, use my example below.

The first thing I did was add a custom class to the row I wanted to have unique background. You can do this by clicking Row Settings (Wrench icon). Then go to the Advanced tab and scroll to the bottom.

I added a class called change-bg as you can see from the CSS below.

@media (max-width: 768px) {
  .change-bg {
    background-color: red;
  }
}
@media (max-width: 768px) {
  .change-bg .fl-row-content {
    background-color: green;
  }
}

The first media query, will apply a red background to the entire row.
The second media query, will apply a green background to the content area of that row.

All you will want to do is replace the background-color property in the CSS abvoe with background-image and add your image path/URL.

Thanks,
Danny

3

Hi Danny, thank you I will try. The code I tried to use was from the knowledge-base page:
http://forum.wpbeaverbuilder.com/knowledge-base/change-row-background-image-on-mobile-view/

  • Johannes
4

Hi Johannes,

In the KB article, it states that we are using a class called first-row did you add that to the row via the custom class option?

Thanks,
Danny