Replacing Background video with an image on mobile

Hi!

I have a background video for my hero section on my website. I would like to replace that video with a fixed image for the mobile layout and can't seem to find a way to do that so that's why I'm reaching out to the community!
 

I would like to be able to resize the text on this hero section for the mobile layout as well.

Thank you in advance for any help you can bring me 🙂

@Mofoxdesign Hi! Can you share your site URL for context? Also, if you haven't already, set your mobile fallback image in the section background settings.

Hey @Lesum Thank you for your quick response!

Here's the url : https://manifest-design.com/home-2

And yes, I have set the fallback image in the section background settings.

@Mofoxdesign You can add this code in Website > Pages > Website Tools > Custom CSS

@media screen and (max-width:767px) {
	section[data-section-id="66967f6c4958591ff334c52c"] {
		.section-background video {
    		opacity: 0 !important;
		}
		.section-background img {
    		opacity: 1 !important;
		}
	}
}

@Lesum Cool, so this works, but is there a way of setting a different image than the fallback image? Because the fall back image is also used for the desktop version when the internet is slow.

Thank you 🙂

@Lesum That's awesome! It worked perfectly! Thank you so much!

God bless you!

Hi there,

Im having this same issue.  I copied and pasted that code and found the URL for the image I'd like to use on mobile but unfortunately, nothing has changed.   I also tried with the first set of code for the set fallback image and that didn't work as well.  Would there be a setting/button i'm missing to make this work?  Thank you! 

On 8/8/2024 at 4:05 AM, Mustberoz said:

Hi there,

Im having this same issue.  I copied and pasted that code and found the URL for the image I'd like to use on mobile but unfortunately, nothing has changed.   I also tried with the first set of code for the set fallback image and that didn't work as well.  Would there be a setting/button i'm missing to make this work?  Thank you! 

You need to change ID in the code. You can use this below tool.