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