Change row background image on mobile view

Most of the time, full-width images don’t look that great on mobile view, because they are cropped (which is better than being stretched). One way to get around this is to change the background image when it reaches the mobile responsive breakpoint. Here's how.

To change the background image for a row on mobile view:

  1. Upload the mobile image to your media library and copy the URL for its location.
  2. Open the row with the background image for editing and click the Advanced tab.
  3. Scroll to the CSS selectors section and enter a custom name in the Class field.
    It's a best practice to add a custom prefix to your class names as a namespace, to avoid conflict and identify where the class came from. In this example, we'll use the custom class name  ss-changeme
  4. Save the row settings.
  5. Add the CSS rule below.
    See the article on where to put custom CSS code.
  6. Replace the class .ss-changeme in the code below with your own class, and change the URL to the one you copied in Step 1.
  7. Click Save.
/* Change background image on mobile view*/
@media (max-width: 767px) {
  .fl-builder-content .ss-changeme > .fl-row-content-wrap  {
    background-image:url(http://www.domain.com/wp-content/uploads/2017/10/mobile-background.jpg);
  }
}