acsummerfield

Good thinking! Thank you very much. I appreciate all of the help!

Thanks so much! It appears to be working much better than it was before, but I'm still encountering some oddities. More than happy to workshop on my own, but wanted to see if anything came to mind for you on first glance. Fullscreen on an FHD monitor, site looks good. Browser resized down to a sort of rough tablet estimate, it plays fine, except there's clearly a backplate filling in at the top and bottom (like a letterboxing effect). However, accessing on a mobile browser, I just see a small version of the backup image. The mobile video (bottom of the two spaces) is formatted perfectly for a mobile display, so I'm not sure what's causing the odd hitch. Zero rush, I'll poke around, just wasn't sure if you would be familiar with the quirk. Thank you very very much!

Thank you very much. I don't want to ask too much, but is there any way to make this code work within the Custom CSS portion of the platform? I only have a Personal account, so I cannot add any code injections via the Advanced Page Settings. 🤞

Understood! I've gone ahead and killed the parallax effect. Is there a simple way for me to upgrade to a v7.1 site? I've hosted my site via Squarespace for quite some time, but am still somewhat green with the intricacies of the platform. Thank you very much for your time!

Hey there, creedon! Is there any way to do this via the Custom CSS side of things? Sorry, I mentioned my situation just above Francisbelaen's post and am still having trouble. Thank you!

My apologies for continuing to kick this topic down the road, but following along with this thread, and many others responded to by creedon, I'm still having a bit of trouble. I've generated two sections (desktop on top, mobile on bottom) with their own background videos and fallback images, but neither is hiding or swapping when resizing the window / accessing on mobile. My site is available at http://www.alessiosummerfield.com. The code that I've tried is linked below: /* hide bottom video on desktop */ @media screen and ( min-width : 768px ) { [data-section-id="63ce7fec5026552f70e68d33"] { display : none; } } /* hide top video on mobile */ @media screen and ( max-width : 767px ) { [data-section-id="63ce98311792970f43e60632"] { display : none; } } I have been unable to find any data-section-id, but I've found data-collection-id or (using the Squarespace ID Finder that creedon linked to above, #block-63ce7fec5026552f70e68d33 and #block-63ce9e2e67856848516c1caf respectively). I've adjusted the code to read data-collection-id, as well as #block or .block or .data-collection-id to no avail. Any ideas what I may be doing wrong? I'm fairly low-level efficient when it comes to CSS and can mostly just intuit things from looking at context of code, but I'm awful in a vacuum. Thanks so much! Zero rush or pressure.