Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hide background video section (block) on mobile


Romeo

Question

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!

Link to comment

5 answers to this question

Recommended Posts

  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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!

Screen Shot 2021-06-17 at 3.24.58 PM.png

Link to comment
  • 0
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!

Screen Shot 2021-06-17 at 3.24.58 PM.png

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...