Replace Cover Section with Fallback Image on Mobile

Last Updated: Dec 14, 2018
Note: We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

If your Cover section background image is not displaying ideally on mobile, you can use this hack to hide the Cover section and display a fallback image instead.

If your cover isn't displaying nicely on mobile, it's likely because background images are set to 'fill' the entire screen window. Naturally, there is cropping due to the fact that the background image is trying to fill the space of a more portrait-oriented mobile browser window (as opposed to a wider desktop screen view).

To improve the mobile view, you can set a secondary, mobile optimized background image for mobile devices. Here's how:

1. First, select the section with the background image you wish to set a secondary mobile image on.

2. Next, go to your section styles area and under the 'Classes' option, add a classname for this section. We will use this custom class to set a background image for mobile with CSS. For now, let's called it 'mobile-bg-image' .

2. Next, go to Customize > Advanced > Custom CSS, and select the Mobile CSS editor from the dropdown options.

3. Paste in this CSS, replacing '.mobile-bg-image' with the custom class you assigned to your section:

.mobile-bg-image {
   background-image: url(your-image-path.jpg) !important;
}

4. Go to the Media Library in Wordpress and upload the image you wish to serve as your secondary mobile background image (Wordpress > Media > Add New). Generally, we recommend using an image with 678x1360 dimensions for best results. Copy the URL path of your image in the Media Library once done uploading.

5. Replace 'your-image-path.jpg' in the CSS code above with the image URL path you copied from the Media Library.

That's it! Your section will now display your mobile optimized for on mobile devices.
17c96688a1a336f6040dd1b6149c3fa8@semplicelabs.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete