Jump to content

Trouble matching my websites buttons with the background video between mobile and desktop versions...

Recommended Posts

Hey there, don't want to overload too much info about the troubles I've been dealing w/ to achieve this design but here it goes. If you travel to my website, you are greeted by two massive buttons with a single video that is placed as a background element in that section (it looks like two videos but due to complications and me being a noob, I edited it as a SINGLE video that is split in half). 

On mobile view it looks terrible and due to the change in orientation of the buttons, it would be so much easier if I could just put two separate AUTOPLAYING videos behind these large buttons (same style as the Full Bleed feature in background elements). 

Any ideas? Do I need to read HTML and CSS for dummies before I attempt something this bold?

Thanks!

vogulz.com

Link to comment
Posted (edited)

@VOGULZ Hi! First off, you can set up two sections with video backgrounds and add buttons inside each section. After that, we can use some basic CSS code to stack those two sections side by side.

Here's the code snippet:

@media only screen and (min-width: 768px) {
section[data-section-id="665e545d582eb538327b9afe"] {
  display: flex;
  width:50%;
  float: left;
  height: 100vh !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: center;
}

section[data-section-id="665e542fb7df155458656b1c"] {
  display: flex;
  width:50%;
  height: 100vh !important;
    justify-content: center !important;
  align-items: center !important;
  align-self: center;
}
}

You've to replace the section-id in the code. Let me know if I can further explain or help with anything else. 

Edited by Lesum

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

@Lesum Thank you!!! I see what its doing and I think that was a genius idea, however the code seems to break the Squarespace 7.1 user interface and makes it impossible to edit/delete and scale the divided sections once positioned beside one another... The only work around I've found so far is to delete the code then reapply it every time I try to make an adjustment... 

So close though this was super helpful regardless of the hiccup.

Link to comment
On 6/1/2024 at 2:57 AM, VOGULZ said:

Hey there, don't want to overload too much info about the troubles I've been dealing w/ to achieve this design but here it goes. If you travel to my website, you are greeted by two massive buttons with a single video that is placed as a background element in that section (it looks like two videos but due to complications and me being a noob, I edited it as a SINGLE video that is split in half). 

On mobile view it looks terrible and due to the change in orientation of the buttons, it would be so much easier if I could just put two separate AUTOPLAYING videos behind these large buttons (same style as the Full Bleed feature in background elements). 

Any ideas? Do I need to read HTML and CSS for dummies before I attempt something this bold?

Thanks!

vogulz.com

You could use CSS media queries to target mobile devices and replace the single video background with two separate autoplaying videos. It might require some HTML and CSS knowledge, but there are plenty of resources online to help you through it. You could start with tutorials on responsive web design and CSS background videos. Good luck!

Link to comment
Posted (edited)

@VOGULZ Hi! Here's the updated code so it doesn't break the Squarespace interface while editing. 

@media only screen and (min-width: 768px) {
body:not(.sqs-edit-mode-active) section[data-section-id="665e545d582eb538327b9afe"] {
  display: flex;
  width:50%;
  float: left;
  height: 100vh !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: center;
}

body:not(.sqs-edit-mode-active) section[data-section-id="665e542fb7df155458656b1c"] {
  display: flex;
  width:50%;
  height: 100vh !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: center;
}
}
Edited by Lesum

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.