Separate background options for desktop and mobile

Wishlist Calculator
1

For example I would like to be able to choose a video background for desktop but a solid color or alternative image for mobile view.

1 Like
2

Hi there and welcome to the Community, @Matt_Gephart :waving_hand:

Thank you for the idea! I agree that it would be great to have an option to select different backgrounds for mobile and desktop right in the settings. We’ll try to consider this idea in the future, espeicially if more users support it :slightly_smiling_face:

As for now, you can set a different background on mobile using one of the codes below in the Custom CSS field on the Settings tab.

Solid color background:

@media (max-width: 500px) { 
.es-background-container iframe {
	display: none;
}

.es-background-base {
	background-color: lightblue !important;
}
}

Image Background

@media (max-width: 500px) {
.es-background-container iframe {
	display: none;
}

.es-background-container {
	background: url('https://picsum.photos/400/900') no-repeat;
}
}

Here you’ll need to replace the image URL with the URL to your image :slightly_smiling_face:

image
image592×157 8.78 KB


By the way, we’ve noticed that you’re currently using a media request (styles for mobile) in your widget:

image
image261×534 24.4 KB

This means that you can use the codes above without @media (max-width: 500px) { and } at the end. Just place the code inside your media request, like in the screenshot: below :wink:

image
image1328×978 78.1 KB

2 Likes
3

Thank you for the consideration and for looking into my specific implementation and offering me some solutions. That worked and will do the trick for now, my suggestion is only to make this somewhat more user friendly.

Thanks again for the quick reply and assistance Max!

1 Like
4

Yep, we’ll try to think about adding a special settings for this!

Thanks again for the feedback :wink: