Hide background video section (block) on mobile

Site URL: https://archmillinc.squarespace.com/

Hey there, I found some custom css in the SS forum that helps me locate the BG video tag, but rather than hiding the element completely on mobile, it just replaces it with a white box. I tried adding

height: 0 !important;

But that doesn't fix it. Here's the current CSS:

@media screen and (max-width: 800px) {  
	#collection-60afc070b0dd7438d0d5a7cd .sqs-video-background.content-fill {
   		height: 0;
   		display: none;
 	}
}

I'm looking to hide the BG video element completely and display a standard video block on mobile, which I'm familiar with doing.

Site pw: archmill

Thanks in advance!

You mean hide home first section  on homepage or hide first section video?

Hey, @tuanphan

My apologies, I'm looking to hide the video on the following page - https://archmillinc.squarespace.com/careers

Thank you,

P.s. Just to be clear, I've hidden the video when viewing on mobile, but I want the white block/box to be removed as well.

18 hours ago, Romeo said:

Hey, @tuanphan

My apologies, I'm looking to hide the video on the following page - https://archmillinc.squarespace.com/careers

Thank you,

P.s. Just to be clear, I've hidden the video when viewing on mobile, but I want the white block/box to be removed as well.

Add to Design > Custom CSS

/* Hide video mobile */
@media screen and (max-width:767px) {
[data-section-id="60afc070b0dd7438d0d5a7cf"] {
	display: none !important;
}
}

Hey @tuanphan, as always, your provided solution works great. Now, on mobile only, I'm displaying a video-block, but the top is getting cut-off after hiding the background video (see screenshot attached) .

I'd like it to touch the blue banner, but not appear cut-off. I tried adding a top-margin, but depending on the mobile screen size it varies and it doesn't always but up against the bottom of the header. Any idea why this is?

Also how do I make the mobile-only video block full-screen?

Thank you, once more!

11 hours ago, Romeo said:

Hey @tuanphan, as always, your provided solution works great. Now, on mobile only, I'm displaying a video-block, but the top is getting cut-off after hiding the background video (see screenshot attached) .

I'd like it to touch the blue banner, but not appear cut-off. I tried adding a top-margin, but depending on the mobile screen size it varies and it doesn't always but up against the bottom of the header. Any idea why this is?

Also how do I make the mobile-only video block full-screen?

Thank you, once more!

Add to Design > Custom CSS > Then save & reload your site

/* Mobile-Careers */
@media screen and (max-width:767px) {
[data-section-id="60cb94da167bce42e8771a3c"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 10vh !important;
}
}