Jump to content

Scale mobile landing to page to proper size

Recommended Posts

Site URL: https://faintinggoatradio.com

My landing page is a video that I have coded into my home page. It looks pretty good on the computer, I'm having problems getting the code right to scale it on mobile devices. Can anyone please help? To be as clear as I can, I loaded a mp4 video into the custom CSS area, and then clicked on it to copy the information. Then I wrote this code in the advanced settings for the home page so it only plays when you visit the website the first time. Heads up, I know nothing about code. This is the code I have so far:

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/5fdcd8461f9b8b546a80a7df/t/6007364112ae981e81de7453/1611085385667/FGR+Landing+Page+Extended+.mp4" backround="transparent' speed="1" style="width: 100vw; height: 100vh;">
</div>

<style>
.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #f3f3f5;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 3s;
  animation-delay: 5s;
}
@keyframes slideOut {
  from {margin-left: 0vw;}
  to {margin-left: 100vw;}
}
</style>

Link to comment
  • Replies 2
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

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