Remove Row Background Image on Mobile

This guide will show you how to remove a row background image on mobile, and allow you to specify a background colour instead.

 

Smallest Screen Size (Mobile phones only)

Specify a custom CSS class for your row

To switch the background image off on mobile phones, you first need to specify a custom CSS Class for your row.  To do this, click the gear icon when hovering over the row to access the row options.

Enter a name for your custom CSS class as shown below:

 

In this example i have named my CSS class "bg-change".  You will need this custom class in a moment

Add CSS to hide the Row and replace with colour

Next, go to Page Settings > Other Scripts > Custom CSS and add this code:

@media only screen and (max-width: 479px) {
.bg-change{background-image:none !important;background-color:#222222 !important;}
}

You will need to change the "bg-change" part with your custom row class name (ensure you still keep the dot/period before the name)

Now you need to specify the colour you want to replace the image with on mobile.  Replace the #222222 with the hex colour code you want to use

You can find a hex colour picker here:http://www.w3schools.com/tags/ref_colorpicker.asp