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.
Though we include options to allow for re-positioning of background images for mobile, you may wish to display a separate Cover section background image for mobile devices. This will help avoid unwanted cropping on more vertically-oriented mobile screens.
Getting our mobile image URL
We'll need to grab the URL path of the image that we will display for mobile. To do so, head over to the Media Library from the Wordpress admin dashboard. Then, select your image and under Attachment Details you can grab the image URL under the 'Copy Link' value.
Adding the CSS
We'll now need to add the CSS required to display a separate images for mobile devices. Go to the page or project you wish to display a separate Cover background image on for mobile, and under the Branding options open up the custom CSS editor. Paste in the following CSS:
@media screen and (max-width: 543px) {
.cover-image {
background-image: url(your-image-url.jpg) !important;
}
}
Be sure to replace 'your-image-url.jpg' with the image path URL you coped in the previous step.
Customizing the breakpoint
You can use this article to get different CSS breakpoint values in case you want to replace the image on larger devices.