Jump to content

Changing Background on Mobile Only

Go to solution Solved by Lesum,

Recommended Posts

Hi!

Working on a website for a new client — they want a welcome page with a slideshow of images and a 'welcome home' button in the center of that. I couldn't figure out how to add a button over a slideshow of images, so instead, I created a video and made it the background of the section, and added the button. It looks great on desktop, but on mobile, the video quality is terrible.

So, I'd like to be able to make the mobile fallback image always appear on the mobile site or just use code the make the mobile site always load an image instead of the video. Does anyone know what CSS I need to do this or any workarounds?

Password for website: Share2024!

 

Link to comment
  • Solution

@CFA123 Hi! Try adding this code under Custom CSS panel:

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

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.